js实现节流和防抖

代码实现

防抖：

就是指连续触发事件但是在设定的一段时间内中只执行最后后一次，例如：设定1000毫秒执行，当你触发事件了，他会1000毫秒后执行，但是在还剩500毫秒的时候你又触发了事件，那就会重新开始1000毫秒之后在执行。

记忆核心：重新开始

应用场景：搜索框搜索输入 文本编辑器实时保存

  let timerId = null
  document.querySelector('.int').onkeyup = function(){
    // 防抖
    if(timerId!== null){
      clearInterval(timerId)
    }
    timerId = setTimeout(() => {
      console.log("我是防抖");
    }, 1000);
  }

节流：

就是指连续触发事件但是在设定的一段时间内中只执行一次函数。例如：设定1000毫秒执行，那你在1000毫秒触发在多次，也只在1000毫秒后执行一次

记忆方法：不要打断我

应用场景：高频事件 例如 快速点击，鼠标滑动，resize事件，scroll事件。下拉加载 视频播放等。

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

其实，我开发一般用lodash库，利用里面的debounce（防抖）和throttle（节流）来做的。