防抖和节流

防抖：就是指连续触发事件但是在设定的一段时间内中只执行最后一次。

例如：设定1000毫秒执行，当你触发事件了，他会1000毫秒后执行，但是在还剩500毫秒。的时候你又触发了事件，那就会重新开始1000毫秒之后再执行。

记忆核心：从新开始。

防抖的使用场景：

1.搜索框搜索输入，不是每次输入的时候都发送请求，多少秒之后再去发送请求。

2.文本编辑器实时保存。没必要每次输入都保存。

3.mousemove 鼠标滑动事件

代码实现思路（主要使用定时器）

  let debounce = function (callback, duration) {

​      let t;

​      return function () {

​        if (t) {

​          clearTimeout(t)

​        }

​        t = setTimeout(() => {

​          callback.apply(this, arguments)

​        }, duration)

​      }

​    }

​     div.onmousemove = debounce(function () { console.log(1) }, 200)

节流：就是指连续触发事件但是在设定的一段时间内中只执行一次函数。

例如 ：设定1000毫秒执行，那你在1000毫秒触发在多次，也只在1000毫秒后执行一次，不会重新开始。

记忆方法：不要打断我

节流的使用场景：

高频时间例如快速点击，鼠标滑动。resize事件、scroll事件。

下拉加载

视频播放记录时间

商品搜索列表、商品橱窗等 ​ 用户滑动时 定时 / 定滑动的高度 发送请求

开关结合定时器：

 let throttle = function (callback, duration) {

​      let flag = true; //*闭包*

​      return function () {



​        if (flag) {

​          flag = false;

​          setTimeout(() => {

​            callback.apply(this, arguments);

​            flag = true

​          }, duration)

​        }

​      }

​    }



​    div.onmousemove = throttle(function () { console.log(1) }, 1000)

或者使用定时器：

let timerId=null;
document.querySelector('.ipt').onmouseover=function(){
    //节流
    if(timerId!==null){
        return;
    }
    timerId=setTimeout(()=>{
        console.log('我是节流')
        timerId=null
    },100)
}

总结：

防抖是在一段时间后再执行操作，若在一段时间内被重复触发，则重新计时。利用定时器，每次触发先清除掉以前的定时器(重新开始)

节流是在一段时间内只运行一次，若在一段时间内重复触发，只有一次生效。利用定时器，带定时器执行完毕，才开始定时器(不要打断我)

 防抖可能用于无法预知的用户主动行为，如用户输入内容去服务端动态搜索结果。用户打字的速度等是无法预知的，具有非规律性。

节流可能用于一些非用户主动行为或者可预知的用户主动行为，如用户滑动商品橱窗时发送埋点请求、滑动固定的高度是已知的逻辑，具有规律性。

一般开发用的是lodash库，利用里面的debounce(防抖)和throttle(节流)来做的