防抖与节流对比

一、防抖(debounce)

1. 基本概念

• 高频事件触发，延迟n秒后回调函数执行一次，在n秒内事件再次被触发则重新计时。
• 借助setTimeout和clearTimeout实现，只有最后一次触发生效。

2. 应用

1）输入框查询请求，连续输入一串字符后才执行查询请求。有效减少请求次数，节约请求资源。

3. 示例

// 计时器
var timer = false;
window.onscroll = function(){
    clearTimeout(timer);
    timer = setTimeout(function(){
    // 300s后执行一次
        console.log("防抖"+ new Date());
    },300);
};       

二、节流(throttle)

1. 基本概念

• 高频事件触发，在n秒内回调函数执行一次，降低函数的执行频率。
• 借助flag元素和setTimeout实现，在一定时间内只执行一次方法。

2. 应用

1）鼠标不断点击触发事件，降低触发次数，降低计算频率。
2）懒加载监听滚动位置，降低触发次数，降低计算频率。

3. 示例

// 在每次执行操作前，必须先判断节流阀是否为空
var timer = null;
window.onscroll = function(){
	// 节流阀不为空不能执行
    if(timer) return false;
    // 节流阀为空可以执行下次操作
    timer = setTimeout(function(){
        console.log("节流" + new Date());
    },300);
};

三、两者比较

• 相同点：
  防抖和节流都是用来控制某个函数在一定时间内执行多少次的方法，减少一段时间内事件的触发频率，最终目的都是避免回调函数中的处理每次都执行，节约资源。
• 不同点：
  防抖是只有最后一次触发生效，倒计时过程中触发的都会被清除clearTimeout。
  节流是每一段时间(自指定的ms)只触发一次，通过节流阀if(timer)来判断是否可执行，减少触发的频率。