js防抖和节流

      //防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
      function debounce(func, delay) {
        let timer;
        return (...args) => {
          if (timer) {
            clearTimeout(timer);
            timer = null;
          }
          setTimeout(() => {
            func.apply(this, args);
          }, delay);
        };
      }
      //节流:规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只触发一次。
      function throttle(func, delay) {
        let timer, lastTime;
        let now = +new Date();// 等同于new Date().getTime()
        //js在某个数据类型前使用‘+’，这个操作目的是为了将该数据类型转换为Number类型，如果转换失败，则返回NaN;
        //+new Date() 会调用Date.prototype 上面的 valueOf方法
        return (...args) => {
          if (lastTime && now < lastTime + delay) {
            if (timer) {
              clearTimeout(timer);
              timer = null;
            }
            setTimeout(() => {
              lastTime = now;
              func.apply(this, args);
            }, delay);
          } else {
            lastTime = now;
            func.apply(this, args);
          }
        };
      }

总结
函数防抖和函数节流都是防止某一时间频繁触发，但是这两兄弟之间的原理却不一样。
函数防抖是某一段时间内只执行一次，而函数节流是间隔时间执行。
结合应用场景
debounce
search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次
throttle
鼠标不断点击触发，mousedown(单位时间内只触发一次)
监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断