防抖和节流

防抖

防抖指事件被在n秒内被触发时，需要重新等待 n 秒后再执行，如果在n秒内一直被触发，则需要一直等待

 function debounce(fn, delay) {
        //存储延时器地返回值
        let timer;
        return function () {
          // 清除上一个延时器，有则清除
          timer && clearTimeout(timer);
          //保存事件对象的this和参数
          let _this = this;
          let _agrs = arguments;
          timer = setTimeout(function () {
            //调用fn并修正this指向和参数
            fn.apply(_this,_agrs);
          }, delay);
        };
      }

节流

指事件在某段时间内只执行一次，若事件多次触发，则会一直等到规定时间后才执行

 function throttle(fn, delay) {
         //定义一个变量，记录上一次的执行时间
        let lastTime = 0;
        return function () {
         //定义一个记录当前执行时间的变量
          let nowTime = Date.now();
          //当时间间隔大于规定时才会触发事件执行
          if (nowTime - lastTime > delay) {
          //调用fn的同时应该修正fn的this指向和参数,让this指向事件对象
            fn.apply(this,arguments);
            //更新lastTime的值，用于下次判断
            lastTime = nowTime;
          }
        };
      }
document.addEventListener('scroll', throttle(function(){}, 1000));

区别

• 防抖
  通常用于键盘事件
• 节流
  通常用于鼠标事件

文章如有错漏，欢迎各位大佬指正