两句话说清楚js的节流与防抖

为什么你还不理解js中函数的节流和防抖是干嘛的?不怪你。原因有二,一是这两个名字是直接翻译的英文节流(throttle)、防抖(debounce),光听名字就已经不知所云了。二是太多的文章太啰嗦,让人找不到重点,使阅读变得困难。
为什么需要节流和防抖?
都是为了防止函数频繁的执行。比如:
节流(throttle)解决以下场景:
1.鼠标不断点击触发,mousedown(单位时间内只触发一次)
2.上拉触底加载更多
防抖(debounce)解决以下场景:
1.search搜索联想,用户在不断输入值时,用防抖来节约ajax请求。
2.滚动条滚动的时候触发事件
所以你不用管它是什么意思,记住使用场景就行了。
直接上代码:
节流(throttle):

// 模拟发送请求的function const send = (...args) => { console.log(...args); console.log("发送请求"); }; const throttle = (fn, time) => { let timer = null; // 这里用到了闭包,被持久化的局部变量就是定时器timer return (...args) => { if (timer) return; fn.call(undefined, ...args); timer = setTimeout(() => { timer = null; }, time); }; }; // 模拟点击按钮的function const click = throttle(send, 5 * 1000); click(1, 2);

第一次调用点击事件click,timer=null,fn(就是send函数)执行,在5s中之内再次调用click函数,由于timer不为空,就在if那里直接return了。这就实现了上文所提的场景。
防抖(debounce):
// 模拟发送请求的function const sendAjax = (...args) => { console.log(...args); console.log("查找"); }; const debounce = (fn, time) => { let timer = null; // 这里用到了闭包,被持久化的局部变量就是定时器timer return (...args) => { if (timer !== null) { clearTimeout(timer); } timer = setTimeout(() => { fn.call(undefined, ...args); }, time); }; }; // 这里是搜索栏变化执行的function const search = debounce(sendAjax, 3 * 1000); search(1,2);

当搜索框内容变化的时候执行了search函数,这个时候创建了一个3s的定时器timer,当在3s内用户再次输入内容又会触发search函数,这时候timer不为空,进入if,执行clearTimeout,清除定时器,然后在重新生成一个3s的timer。这样就实现了上文中所说的场景。
【两句话说清楚js的节流与防抖】弄清楚这个逻辑之后,实现上就很容易了。唯一可能造成困惑的点就是‘ 闭包了 ’,如果有这个困惑,可以看我另一篇关于闭包的文章。

    推荐阅读