带你彻底弄懂JS中的节流和防抖

首先，节流和防抖都是用于不断触发事件的情况，比如onscroll事件，如果不设置节流和防抖，当你绑定onscroll事件并设置事件处理函数，你滑动滚轮就会执行n多次的事件处理函数，造成性能损耗。节流和防抖有时候也会应用在input keydown事件，根据具体情况选择节流还是防抖。

先简单解释一下节流和防抖的概念。

• 节流：当你不断触发某一事件时，每隔一个固定时间，执行一次你想要执行的代码。（为防止频繁触发事件而执行n多次的代码）

• 防抖：停止触发事件之后的固定时间间隔内不再触发事件，才执行一次事件处理函数。（即当你不断触发某一事件时只执行最后一次代码）
  （如果固定时间间隔内事件内再次触发事件，则重新计算时间。）

• 节流代码

   var flag = true   //节流阀默认为true

   window.onscroll = function () {
          //触发事件后代码执行第一次
     if (flag === false) return     // 节流阀闭合则不执行

     flag = false // 来到这里即开关打开状态，现在关掉开关以免重复执行

     console.log('执行一次')
     setTimeout(() => {
       //为防止频繁触发，用延迟器来设置时间间隔
       flag = true     //0.5秒后打开开关
     }, 500)  //若事件被极频繁触发，也能保证至少等待0.5秒再执行下一次
										         //的事件处理函数
   }

• 防抖代码

    var timer = null    //准备一个timer变量来操作定时器
    
    window.onscroll = function () {
       
      clearInterval(timer)   //触发事件就清除掉已有定时器
      					//保证了一定时间间隔内只执行一次事件处理函数
						//而这个时间间隔就是下边延时器的500ms
      timer = setTimeout(() => {
        //设置延时器
        console.log('触发')    
      }, 500)          //0.5秒内不触发该事件，则执行一次延时器内代码
    }