关于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)

      }

      }

```)

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

你可能感兴趣的:(关于JS中函数节流和函数防抖的作用)