本文共 1011 字，大约阅读时间需要 3 分钟。

防抖和节流都是为了解决频繁触发某个事件的情况造成的性能消耗。

防抖

当持续触发事件时，只有在一定时间段内没有再触发事件后，事件处理函数才会执行一次。

应用场景：

1. input输入框搜索功能
2. window触发resize的时候
3. 监听浏览器滚动时，最后触发某个事件

以Input输入框搜索为例：

没有防抖时，在输入时不停的触发事件，不停的请求接口加大了性能的损耗

function debounce (fn,delay) {
       let timer = null    return function () {
           if(timer){
               clearTimeout(timer)        }        timer = setTimeout(fn,delay)    }}function search () {
       console.log('搜索')}document.getElementById('ipt').oninput = debounce(search,500)

这样我们可以看到，设置了停留500ms后再触发事件，就大大降低了事件的触发次数，节约请求资源

节流

在规定的时间间隔内，就算重复触发函数，也只成功调用一次

应用场景：

1. 鼠标不断点击触发
2. 监听滚动条滚动时，根据滚动条位置触发某个事件
3. input输入框搜索也可以使用节流

代码如下：

function debounce (fn,delay) {
       let timer = true    return function () {
           if(!timer){
               return false        }        timer = false        setTimeout(() => {
               fn()            timer = true;        }, delay)    }}function search () {
       console.log('搜索')}document.getElementById('ipt').oninput = debounce(search,1000)

可以看到，不管我触发多少次事件，都只会每隔1s才触发一次

转载地址：http://kzrgn.baihongyu.com/