面试经常会被问到的节流和防抖，一分钟理解

导语：
最近整理面试题目，经常能够看到手写节流和防抖函数，已经它们的用处。一分钟学会它们。

微信搜索 【web小馆】，回复 ”全栈博客项目“，即可获取 项目源码和后续的实战文章教程。

一，防抖

1，定义和原理

• 定义：防抖，即如果短时间内大量触发同一事件，都会重置计时器，等到事件不触发了，再等待规定的事件，才会执行函数。

（举个简单的例子，就是如果你在我这篇博文疯狂点赞再取消赞，这个过程都会把计时器清空，等到你点累了不点了，等待0.5秒，才会触发函数，把你最终结果传给服务器。）而这整个过程就触发了一次点赞函数到服务器。

• 原理：设置一个定时器，设置在规定的时间后触发事件处理，每次触发事件都会重置计时器。

2，用处

防抖用于搜索框和滚动的监听事件处理，如果没有防抖，那么每输入一个字或者滚动屏幕，都会触发事件，甚至一秒钟触发几十次，性能就会浪费。

function debounce(fn, delay = 500) {
    
    let timer = null

    return function () {
        if (timer) {
            clearTimeout(timer)			//如果timer有定义，清空
        }
        timer = setTimeout(() => {
            fn.apply(this, arguments)
            timer = null
        }, delay)
    }
}

一，节流

1，定义和原理

• 定义：每隔一段时间就执行一次。
• 原理：设置一个定时器，设置0.5秒后执行事件，如果时间到了，就会执行函数并重置定时器，等待下一个0.5秒后再执行。

2，用处

滚动栏的位置查询，就能设置每0.5秒执行一次函数。

function throttle(fn, delay = 100) {
    let timer = null

    return function () {
        if (timer) {
            return
        }
        timer = setTimeout(() => {
            fn.apply(this, arguments)
            timer = null
        }, delay)
    }
}

结语：

建议收藏，不然刷着刷着就可能找不到了。

有什么前端的问题欢迎私信我~期待你的到来。

同时你的点赞是对我最大的鼓励，谢谢。

转载：https://blog.csdn.net/gitchatxiaomi/article/details/108371434