[js] 函数的防抖和节流

<input type="text">

const inp = document.querySelector('input')

未加防抖节流

inp.oninput = function () {
      console.log(`我要搜索的内容是: ${ this.value }`)
    }

输入一次，执行一次

防抖

当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时（清除延时器）。

如下，持续触发​​input​​​事件时，并不执行​​console.log​​​(因为执行它的延时器已经被清除了)，当300毫秒内没有触发​​input​​​事件时，才会延时触发​​input​​事件。

实现

// 准备一个变量接收定时器返回值
    let timer = null
    inp.oninput = function () {
      // 每一次执行这个事件（input）的时候, 都关闭一次延时器(那 如果上一次的setTimeout还没执行就被取消的话，就不打印了，所以300ms内连续点击都会被取消，只执行最后一次)
      clearInterval(timer)

      // 把本来应该立即执行的事情, 延后执行
      timer = setTimeout(() => {
        console.log(`我要搜索的内容是: ${ this.value }`)
      }, 1000)

    }

在300ms内输入一次，只执行一次

加入防抖后，当持续在输入框里输入时，并不会发送请求，只有当在指定时间间隔内没有再输入时，才会发送请求。

应用场景

(1) 用户在输入框中连续输入一串字符后，只会在输入完后去执行最后一次的查询ajax请求，这样可以有效减少请求次数，节约请求资源；

(2) window的resize、scroll事件，不断地调整浏览器的窗口大小、或者滚动时会触发对应事件，防抖让其只触发一次；

滚动滚动条

如果在200ms内没有再次触发滚动事件，那么就执行函数
如果在200ms内再次触发滚动事件，那么当前的计时取消，重新开始计时

未加防抖

window.onscroll = function () {
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        console.log('滚动条位置：' + scrollTop);
    }

加了防抖

let timer = null
    window.onscroll = function () {
      // 每一次执行这个事件的时候, 都关闭一次定时器
      clearInterval(timer)

      // 把本来应该立即执行的事情, 延后执行
      timer = setTimeout(function () {
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        console.log('滚动条位置：' + scrollTop);
      }, 1000)
    }

节流

节流原理：规定时间内只执行一次，它与防抖的最大区别是，即使再高频的动作在规定的时间内都会执行一次。

输入内容进行搜索的问题，使用防抖如果输入特别频繁，则不会发送请求，只有等输入停止时才会发送请求
而节流则在规定的时间内都会发送一次请求

实现

// 1. 函数节流
    // 准备节流开关
    // 开关为 true 的时候, 表示可以执行
    // 开关为 false 的时候, 表示不可以执行
    let flag = true

    inp.oninput = function () {
      // 这个事件内的代码是否执行, 取决于 节流开关
      if (!flag) return

      // 代码能执行到这里, 说明开关是开着的
      flag = false

      console.log(`我要搜索的内容是: ${ this.value }`, new Date().getTime())

      // 设置单位时间以后, 讲开关打开
      setTimeout(() => flag = true, 3000)
    }

可以看到无论输入的速度是什么样的，都会每隔3秒执行一次