函数的防抖与节流

函数防抖:
在一个时间节点内,多次触发同一事件,不需要每一次都执行,只需要在一个固定时间内,没有重复操作的时候.
举一个例子:滚动条事件
在我一直快速滚动的时候,不需要一直触发,等到我的滚动结束了,停下来以后在触发.

实现: 准备一个定时器,把你要做的事情放在定时器里面做,
当在300ms内做同一个行为的时候,把定时器关闭掉,只有当你停下来的一瞬间,不会在继续关闭定时器的时候,才会触发事件.

var timer = null 

    window.scroll = function(){
      clearInterval(timer)
      timer = setTimeout(()=>{
        console.log('触发')
      },300)
    }


    /*
      不停的触发滚动事件
        1. 关闭定时器, 没得关代码白执行
           timer 赋值为 300 ms 以后执行
        2. 300ms 以内当我触发第二次的时候
           关闭之前的哪个定时器, 之前那一次 300ms 以后的就不会执行了
           从新设置了一个 300ms 的定时器
    */

函数节流:
在固定时间内,重复触发同一事件,我们在固定时间内,只有第一次时候执行,后面的每一次都不在执行了,直到我们设定的固定到达以后,再次允许执行下一个事件.
举一个例子:滚动
随着滚动一直触发事件,只要你添加一个定时器,模拟一个多少时间以后.
准备一个开关,时间里面的代码根据开关来决定是不是执行.

 // 做一个开关
    var flag = true

    window.onscroll = function () {
      if (flag === false) return

      // 能来到这里, 说明 flag 是 true
      flag = false

      console.log('我执行了')
      setTimeout(() => {
        // 再次把开关打开
        flag = true
      }, 3000)

    }

/*
随着滚动一直再触发 scroll 事件
 1. flag === true,  关闭开关, 执行要执行的代码, 设置定时器
 2. 300ms 以内, 再次触发事件的时候, flag === false
 3. 300ms 以内, 再次触发事件的时候, flag === false
 4. 300ms 以后, 开关变成开启, 再次执行事件, flag === true, 执行要执行的代码, 设置定时器
 */