前端js 防抖和节流有什么区别以及函数封装

防抖： 防抖触发高频率事件时n秒后只会执行一次，如果n秒内再次触发，则会重新计算。 简单概括：每次触发时都会取消之前的延时调用。

fn：回调函数，里面可以做数据请求，delay：延迟时间

适用环境：输入框搜索时，在一定时间内只触发最后一次输入的事件

//防抖
    function debounce(fn, delay) {
      let timer = null;
      return function () {
        clearTimeout(timer);
        timer = setTimeout(() => {
          fn.call(this);
        }, delay)
      }
    }

节流： 高频事件触发，每次触发事件时设置一个延迟调用方法，并且取消之前延时 调用的方法。 简单概括：每次触发事件时都会判断是否等待执行的延时函数

节流：fn：回调函数，里面可以做数据请求和按钮点击 *** 作，delay：延迟时间

适用环境：点击按钮发起请求时，在一定时间内只触发第一次事件

//节流
    function throttle(fn, delay) {
      //1、记录回调函数两次执行的时间间隔
      var lastTime = 0;//函数上一次被执行的时间
      return function () {
        var nowTime = Date.now();
        //2、如果这个时间间隔大于时间限制，那么我们就让回调函数执行
        if (nowTime - lastTime > delay) {
          fn.call(this);
          //更新lastTime
          lastTime = nowTime;
        }
      };
    }

区别：

区别：降低回调执行频率，节省计算资源。 防抖和节流本质是不一样的。防抖是将多次执行变为最后一次执行，节流是将 多次执行变成每隔一段事件执行

函数防抖一定连续触发的事件，只在最后执行一次，而函数节流一段时间内只执行 一次。