关于JS中函数节流和函数防抖的作用

函数节流

说明：在规定的时间内，第一执行函数生效，后面的不生效，只有大于设定的时间才执行下一次。

用途：一般用于一个需要频繁触发的函数，出于优化性能的考虑，只让函数触发的第一次生效，在等待的时间内函数不生效，当超过等待的时间才开始下一次的执行。一般用于滚轮加载，频繁请求网络等

代码片段

(```

// 节流函数

// fn为需要传入的函数，delay为设定的时间

function throttle(fn, delay) {

    // 记录上一次刚执行完函数后的时间

      let lastTime = 0;

     // 返回一个函数，形成闭包，保存lastTime的变量

      return function() {

        // 记录当前时间

        let nowTime = Date.now();

        // 判断当前的时间减去上一次执行完函数后的时间，是否超过设定的时间

        if(nowTime - lastTime > delay) {

        // 改变this的指向

          fn.call(this)

          保存上次执行完函数后的时间

          lastTime = nowTime;

        }

      }

    }

```)

注意：这里使用call改变this的指向，是因为函数内又嵌套了一个函数，该函数的this指向的是window，使用call能让该函数指向调用它的对象

函数防抖

说明：在设定的时间内执行该函数，如果设定执行函数的时间内又触发一次，就会取消上一次的执行，直到最后一次时间内超过设定的时间才执行该函数

使用：一个频繁触发的函数，出于性能的优化，只让该函数在设定的时间内最后一次执行，前面在未超过的时间内函数无法生效。一般用于频繁的点击事件或者搜索框输入等

代码片段：

(```

// 防抖函数

    function debounce(fn, delay) {

    // 保存定时器的变量

      let timer = null;

      return function (...res) {

        // 清除上一次开启的定时器

        if(timer) clearTimeout(timer);

        // 开启定时器

        timer = setTimeout(function () {

          fn.apply(this, res)

        }, delay)

      }

      }

```)

两者之间的区别：函数节流是指在第一次就会先触发一次，而函数防抖是指在最后一次才触发，两者都是为了解决函数的频繁触发，提高性能优化。