木灵鱼儿

木灵鱼儿

阅读:157

最后更新:2021/11/17/ 16:15:31

搞明白防抖与节流

防抖

防抖在日常项目开发的时候还是很重要的,用于防止函数的重复触发,节省性能开支。

比如监听用户的input输入进行api查询,由于input事件每次改变输入的内容都会触发,但是一般来说,只有最后一次input才有效,所以会经常采用防抖的形式来触发。

防抖:在一定时间内重复触发之后只会生效最后一次。

如何写一个防抖呢,我们慢慢来

< script >
"use strict"
const input = document.querySelector("input");

input.addEventListener("input", debounce(function() {
    console.log(`触发了:${Date.now()}`, this);
}, 300))

function debounce(fn, delay) {
    let timer = null;
    return function() {
        if (timer) clearTimeout(timer);
        timer = setTimeout(fn, delay)
    }
} <
/script>

创建一个debounce函数,函数内新增一个timer变量,用于存放定时器,然后抛出一个新函数,函数里面判断,如果定时器存在,就先清除定时器,重新赋值一个定时器。

这样一个基本的雏形就有了,剩下的就是要考虑函数this,以及参数的问题了。

this指向

函数内运行的函数,其this指向window对象,如果在严格模式下,this就是undefined。

function fn1() {
  function fn2() {
    console.log(this)
  }

  fn2();
}

fn1();   //window,严格模式下undefined

但是我们的防抖,是将函数return出去,所以,按照防抖的写法,return出去的函数直接绑定再input对象上,那么它的this指向的就是input本身。

< script >
"use strict"
const input = document.querySelector("input");

input.addEventListener("input", debounce(function() {
    console.log(`触发了:${Date.now()}`, this);
}, 300))

function debounce(fn, delay) {
    let timer = null;
    return function() {
        console.log(this);   //input
        if (timer) clearTimeout(timer);
        timer = setTimeout(fn, delay)
    }
} 
<  /script>

但是我们实际的函数fn却是被setTimeout调用,setTimeout存在于window对象上,fn通过作用域链往上查询this,最终找到的是window,this就等于window。

在函数中,this的指向完全取决于函数调用的位置;谁调用它,他就指向调用它的那个对象。

那么,既然能在return的函数中正确的获取到this,那么我们就可以有很多种方式让fn绑定到正确的this上。

< script >
"use strict"
const input = document.querySelector("input");

input.addEventListener("input", debounce(function() {
    console.log(`触发了:${Date.now()}`, this);
}, 300))

function debounce(fn, delay) {
    let timer = null;
    return function() {
        if (timer) clearTimeout(timer);
        timer = setTimeout(fn.bind(this), delay)
    }
} 
</script>

我们可以用bind或者call,apply的方式改写this指向。

你甚至可以看到防抖中这种写法:

< script >
"use strict"
const input = document.querySelector("input");

input.addEventListener("input", debounce(function() {
    console.log(`触发了:${Date.now()}`, this);
}, 300))

function debounce(fn, delay) {
    let timer = null;
    return function() {
        let that = this
        if (timer) clearTimeout(timer);
        timer = setTimeout(()=>{
          fn.call(that);
        }, delay)
    }
} <
/script>

利用that变量保存,然后在箭头函数里面用call这种方式,事实上其实没必要的,箭头函数本身没有this,他的this将是声明它时作用域链中的this,那么this也会是input,因为他会找到return function它的this。

现在this,问题我们高定了,剩下的就是参数问题了。

参数

事件绑定,一般都是会使用到event对象,甚至一些其他自定义参数,我们不能确定使用者它将使用什么参数名,多少个参数,所以,我们得有一个办法获取到函数接收的所有参数。

在es5的时候,我们会使用函数内的arguments对象,他是一个类数组对象,里面包含了所有的参数,但是并不建议使用,不过我也是道听途说,说是会影响性能。既然都es6了,可以放弃了。

现在es6的话,我们可以利用函数的reset参数,将所有参数保存到数组中去。

function fn(...args) {
  console.log(args);   //[...]
}

那么现在参数可以拿到了,如何传给fn呢,我们bind方法其实提供了第二个参数,他和call的第二个参数一样,传递参数用的,所有参数用逗号分割。所以

< script >
"use strict"
const input = document.querySelector("input");

input.addEventListener("input", debounce(function(evnet) {
    console.log(`触发了:${Date.now()}`, this, evnet);
}, 300))

function debounce(fn, delay) {
    let timer = null;
    return function(...args) {
        if (timer) clearTimeout(timer);
        timer = setTimeout(fn.bind(this,...args), delay)
    }
} 
</script>

一个防抖函数就完成了。

注意事项

由于防抖生成的是全新的函数,如果绑定了事件,想要关闭事件,那么就必须先将防抖生成的函数变量保存下来才能成功清除事件。

<script>
"use strict"
const input = document.querySelector("input");
const button = document.querySelector("button");

const fn = debounce(function(event) {
    console.log(`触发了:${Date.now()}`, this, event);
}, 300);

input.addEventListener("input", fn);
button.addEventListener("click", function(event) {
    input.removeEventListener("input", fn);
});

function debounce(fn, delay) {
    let timer = null;
    return function(...args) {
        console.log(this);
        if (timer) clearTimeout(timer);
        timer = setTimeout(fn.bind(this, ...args), delay)
    }
} 
</script>

节流

节流和防抖的处理完全不一样,节流是在一定时间内只触发一次,不管点击多少次。所以,节流可以很快的响应第一次操作,后面的第 N次则要等待时间到了才能触发。

function throttle(fn, delay) {
    let lastTime = null;

    return function(...args) {
        const newTime = Date.now();
        if (!lastTime || newTime - lastTime > delay) {
            fn.call(this, ...args);
            lastTime = newTime;
        }
    }
}

节流的处理就会简单一些,不用定时器了,我们保存时间戳,如果运行时的时间戳减去旧的时间戳大于间隔时间,那么我们可以再运行一次,更新一下lastTime

由于我们没有使用定时器运行fn,所以采用call或者apply的方式,改写this指向的同时,运行函数,并传入参数。

其this和参数上面就说过了,所以不重复。

注意事项

由于会生成新的函数,所以事件绑定的时候,记得用变量保存,方便正确清理事件。

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 1
文章被阅读 157

相关文章