一张图搞清楚防抖和节流的区别

1、防抖(debounce)

指在时间n内,函数被触发多次,但是只执行一次,执行最新的触发。也就是在时间n内,碰到新的触发,就清除之前的,重新计时。

最简单的实现

function debounce(func, wait) {
    var timeout;
    return function () {
        clearTimeout(timeout)
        timeout = setTimeout(func, wait);
    }
}

修改this指向的

function debounce(func, wait) {
    var timeout;

    return function () {
        var context = this;

        clearTimeout(timeout)
        timeout = setTimeout(function(){
            func.apply(context)
        }, wait);
    }
}
2、节流(throttle)

当持续触发某个事件时,会有规律的每隔时间n就执行一次函数。

最简单的实现

function throttle(func, wait) {
    var context, args;
    var previous = 0;

    return function() {
        var now = +new Date();
        context = this;
        args = arguments;
        if (now - previous > wait) {
            func.apply(context, args);
            previous = now;
        }
        // 时间没到,啥都不干
    }
}
3、区别

对新触发执行的时间点不一样
在这里插入图片描述

上面的示例均为延迟防抖和延迟节流,特点在于执行时间点在周期最后。相对应的有前缘debounce和前缘throttle,这个执行时间点是立即执行的,对应上图中的1节点,之后的触发还是按照上图来,debounce的第二次执行会在停止触发之后的1s执行,throttle会在1s之后看有没有新的触发。

上文中代码来自于:

JavaScript专题之跟着 underscore 学防抖
JavaScript专题之跟着 underscore 学节流

4、lodash的使用

在这里插入图片描述
这句话我看了半天,大概理解是这样,当有触发时,会先执行一次leading的func, 后面如果又有n次触发,就又执行一次func,n的取值可以是n >= 1

5、防抖还是节流

以一个输入框为例,来测试lodash防抖和节流的区别:

在这里插入图片描述

快速在输入框内输入123,函数wait时间设置为1000,并保证输入在1s内完成。

_.debounceleadingtrailing结果分析
1truefalse打印了1只有开始执行,无法获得最终输入的数据,
默认falsetrue输入完成1s后, 打印了123在输入间隔时间小于1s的情况下,打印不会执行,直到你停止输入1s后,才打印
3truetrue打印1; 1s后打印123开始执行一次,停止输入后1s后执行1次
4falsefalse啥都不干!
_.throttleleadingtrailing结果分析
1truefalse打印了1同debounce
2falsetrue1s后, 打印了123从输入开始的1s后,打印1次,不同于debounce的停止输入后的1s打印
默认truetrue打印1; 1s后打印123开始执行一次,1s后再执行1次
4falsefalse同debounce

总结
throttle和debounce最大的区别在于最后打印的时间不一样。
所以,选择防抖还是节流,主要取决于具体的需求。

  1. 输入框需求,我肯定是想要在我输入完成之后再进行请求,而不是在我输入过程中,每隔1s就发一下请求,所以我会选择防抖,并设置wait为100或者200, 选择第2种配置。

  2. 对于按钮,我会设置wait为1000,使用第1种配置。这种防抖和节流函数从结果来看没有区别。

其他场景就看你需要什么样的效果了。

6、公用组件使用防抖和节流

比如我写了一个公用组件he-input,监听@input事件,并对调用debounce处理该事件,时间间隔为1000。

// he-input.vue 组件

<el-input v-model="value" @input="inputChange"></el-input>

methods: {
	inputChange: _.debounce(
	  function (v) {
	    console.log(v)
	  },
	  1000,
	  {
	    leading: false,
	    trailing: true,
	  }
	)
}

如果一个页面只有1个he-input,那没有问题。

当一个页面有两个甚至多个he-input的时候,就会有问题。

上面的时间间隔是1s,那么当我在1s内改变两个输入框的值,但结果只触发了一次打印,
主要原因是两个组件用了同一个debounce函数,两个组件在1s内先后触发,debounce只执行了最后一个触发,之前的都被忽略

因此,在公共组件内用防抖和节流要注意将其写在created或者mounted里面,让每一个实例都有其各自的函数。

created() {
	this.inputChange =  _.debounce(
	  function (v) {
	    console.log(v)
	  },
	  1000,
	  {
	    leading: false,
	    trailing: true,
	  }
	)
}
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值