javascript之防抖(debounce)和节流(throttle)

javascript之防抖和节流

为什么要有这个概念？为了性能！！！

都是减少了函数执行的频率

一、什么是防抖

1.防抖定义

事件触发之后，在一定的时间间隔内，该事件只触发一次。
如果在该事件间隔内再次触发，则重新设置该时间间隔。

2.防抖举例

onresize，scroll，mousemove ,mousehover ，keyup等会短时间内多次触发（频繁触发）；
例如点击按钮执行ajax保存数据，如果不做处理，连续点击，会保存多次；
不做限制的话可能一秒执行几百次；

3.代码实现

如下代码，最终只会在控制台输出一个时间戳

function myDebounce (callback,delay = 200) {
	var timer = null;
	return function (){
		if(timer){
			clearTimeout(timer);
		}
		timer = setTimeout(function(){
			callback()
		},delay);
	}
}

var testFn = myDebounce(function(){
	console.log(Date.now());
},10)

var num = 100000
while(num){
	testFn();
	num--;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

二、什么是节流

1.节流定义

事件触发之后，保障在一定时间内，只调用一次该事件处理函数。

2.节流举例

如：resize中，我们要重新设置一个div的高度。如果采用防抖，那么只会在最后一次执行，在resize过程中，不会执行，会导致用户看起来div卡了一会。
如果使用节流，那么在用户resize过程中，div的高度也会随之变化，但是又不用密集去改变，节省一定的性能。

3.代码实现

如下代码，最终只会在控制台输出2-3时间戳

function myThrottle (callback,delay = 200) {
	var timer = new Date();
	return function (){
		var current = new Date();
		if(current - timer > delay){
			callback();
			timer = current;
		}
	}
}

var testFn = myThrottle(function(){
	console.log(Date.now());
},10)

var num = 100000
while(num){
	testFn();
	num--;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

三、什么区别？

防抖：是n秒内只执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。

节流：是间隔时间执行，不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数。