防抖(debounce)与节流(throttle)函数的应用

一、防抖函数 debounce

1、什么是防抖函数？

防抖函数的作用是当短期内有大量的事件触发时，只会执行最后一次事件关联的任务。

debounce(fn){
  let timeout = null;  // 定时器id
  return function() {
	clearTimeout(timeout);  // 清除旧的定时器
	timeout = setTimeout(() => {
	  fn.apply(this, arguments);  // 执行fn
	}, 500)
  }
}
1
2
3
4
5
6
7
8
9

观察上面防抖函数的代码逻辑：

定义一个防抖函数，返回一个匿名函数（闭包），传入需要执行的事件fn，定义一个定时器，规定500ms后执行当前事件fn；根据防抖的作用：只会执行最后一次事件关联的任务；也就是说在500ms内，如果重复触发了定时器任务，那在旧的timeout尚未执行时就被清理掉了clearTimeout(timeout)，而且500ms内只允许有一个timeout等待执行。

举个例子：

• A到主管处领任务，主管把任务分配给A，并告诉A，在500ms后再执行任务。
• 如果在500ms内B也来领取任务，那么主管会马上取消A的任务，然后把这个任务分配给B，并告诉B，500ms后再执行此任务。
• 那如果在500ms内又有C来领取任务，那么任务就会分配给C，而取消B的任务。
• 接下来500ms内没有人领取任务了，那么500ms后，C就会执行当前的任务，也就是说一定是最后一个人执行任务。

2、应用场景

1. 改变浏览器尺寸resize，只获取最后一次的尺寸信息

二、节流函数 throttle

什么是节流函数？

节流函数的作用是当短期内有大量的事件被触发时，只会执行第一次触发的事件

throttle(fn){
  let timeout = null;  // 定时器id
  return function(){
	if (timeout) return;  // 如果id为空，不执行以下逻辑
	timeout = setTimeout(() => {
	  fn.apply(this, arguments);  // 执行fn
	  timeout = null;  // 将定时器id设置为null，以便下次触发事件时重新启用定时器
	}, 500)
  }
}
1
2
3
4
5
6
7
8
9
10

观察节流函数的代码逻辑：

此函数的原理为当每次事件触发时，先判断与该事件关联的任务是否正在等待执行。如果不是，那么就创建一个timeout，让任务等待执行。再有新事件触发时，如果发现有任务正在等待，就直接退出。

举个例子：

• A到主管处领任务，主管把任务分配给A，并且告诉A，任务需要500ms后执行。
• 在接下来的500ms内，B又来领取同样的任务，主管会直接拒绝B的申请。
• 直到A执行完成任务后，又有C来申请任务，主管才会给C分配任务。

2、应用场景

1. scroll 事件，每隔1秒计算1次位置信息等
2. input 框实时搜索并发送请求展示下拉列表，每隔1秒发送1次请求 (也可做防抖)