本文来自我的小伙伴小帅，从JS基础出发一起学习JS，全网首发

今天我来谈一谈我对防抖和节流的应用场景和理解，防抖和节流在实际项目中还是比较多的，主要用于提升用户体验，也是一个高频的面试题。

比如说，最常见的，在日常开发过程中，经常遇到在浏览器滚动时添加事件的问题，当你滚动一次滚动条的时候，你只想（或者你以为只会）触发一次这个事件，然而现实是会触发很多次，甚至让页面出现了抖动，用户体验很不好，这样也很消耗浏览器性能。

明明滚动条只滚动了一次，但是函数却执行了很多次，为什么会出现这种情况？要如何解决这个问题呢？

首先来了解2个概念

函数防抖(debounce)：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。

函数节流(throttle)：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。

函数节流与 函数防抖 都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。

函数防抖

当持续触发事件时，在设定的时间内没有再次触发，那事件就会执行一次，如果在设定的时间内，再次触发，或者触发多次，那么事件就会重新开始延时，直到期间没有触发，那事件就会再执行一次。一句话总结： 事件执行的永远是最后一次。

function scollFun (fn,time) {      let timer = null;      return function(){        if(timer){          // 进入该分支语句，说明当前正在一个计时过程中，          // 因为滚动一下会触发很多次，并且又触发了相同事件。          // 所以要取消当前的计时，重新开始计时          clearTimeout(timer)          timer = setTimeout(fn,time)        }else{          // 进入该分支说明当前并没有在计时，那么就开始第一个计时          timer = setTimeout(fn,time)        }      }    }    function showTop () {      // 这样写是为了兼容浏览器      var scrollTop = document.body.scrollTop || document.documentElement.scrollTop      console.log('滚动条位置'+scrollTop)    }    window.onscroll = scollFun(showTop,1000)

看上面测试结果动图发现都会按要求执行最后一次。

经过上面的案例我们了解了函数防抖，但是有没有发现一个问题，就是如果一直在这个设定时间段内一直执行触发，那理论上永远都不会执行完，一直在重复重复中，所以这就有了函数节流这个方案。

对函数防抖简单总结

1.每次触发事件时设置一个延迟调用方法，并且取消之前的延时调用方法，将多次操作合并为一次操作进行。

2.原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。

3.缺点： 如果事件在规定的时间间隔内被不断的触发，则调用方法会被不断的延迟

函数节流

函数节流，就是当持续执行事件时，在这个设定范围内，始终只执行一次，不管你在这个期间执行多少次，他始终只会执行一次，总结一下就是始终执行的是开始的第一次。

// 节流  function throttle (fn,time) {      let valid = true      return function () {        // 此期间只会执行一次，重复执行的话，就会retrun 不会执行到下面的代码，        // 直到setTimeout里面执行以后才会改变状态        if(!valid){            return false        }        valid = false        setTimeout(()=>{          fn()          valid = true        },time)      }  }  function showTop () {    // 这样写是为了兼容浏览器      var scrollTop = document.body.scrollTop || document.documentElement.scrollTop        console.log('滚动条位置'+scrollTop)    }    window.onscroll = throttle(showTop,1000)

看测试结果结论就是不论怎么执行 在规定的时间内也只会执行一次。

对函数节流简单总结

1.每次触发事件时，如果当前有等待执行的延时函数，则直接return。

2.原理是通过判断是否有延迟调用函数未执行。

防抖和节流 虽然只能算的上性能优化的问题，但是面试时还是经常会遇到，而且当面试官问到你时，你要能简约、简单明了的回答出来，答出重点，不然说了一大堆，面试官可能还不明白你要表达啥。

重点总结

函数防抖，在自己规定的时间内，只会执行一次，但是是最后触发的那个事件，如果重复触发事件，会一直执行，直到最后一次执行。

函数节流，也是在自己规定的时间内，只会执行一次，但是是第一次触发的事件,如果重复触发事件，也只会执行一次，就是第一次触发的那次。

运用场景： 一般在 input 搜索的时候会运用的比较多，有时候搜索的时候监听的 input ，每次输入都会触发，所以输入一个会触发一次，会调取一次后台接口返回内容，再渲染上去，在这时产品经理就会要求希望是用户在输入完以后再进行搜索，而不要那么频繁，即在一定的时间内只触发一次。

以上就是我对防抖和节流的简单理解，希望能对你有帮助！

最后欢迎大家来纠错、提建议，一起学习！

如果对你有帮助，可以转发/收藏，点个赞给个支持一下吧~