JavaScript的函数节流

发表于 | 分类于

前言

我在我的网易云音乐项目中，因搜索歌曲的需求，需要监听输入框的oninput事件。
但后来发现我的数据库接受请求次数有些异常，原来是用户每一次输入过程中都会向后端发送请求，非常浪费性能。
之后搜索并了解到js的函数节流，有效解决了这一问题，便有了这篇博客。

函数节流的原理

函数节流的原理就是定时器。
当我触发一个时间时，先setTimout让这个事件延迟一会再执行，如果在这个时间间隔内又触发了事件，那我们就clear掉原来的定时器，再setTimeout一个新的定时器延迟一会执行，就是这样。

代码实现

定义一个节流函数：

1
2
3
4
5
6
7
8
9
10
function throttle(fn, delay){
 	var timer = null;
 	return function(){
 		var context = this, args = arguments;
 		clearTimeout(timer);
 		timer = setTimeout(function(){
 			fn.apply(context, args);
 		}, delay);
 	};
};

调用：

1
2
3
4
5
6
7
this.view.$el.on('input', '#search',(e)=>{
    event(e)
})    
let event = this.throttle((e)=>{
    let val = $(e.currentTarget).val()
    //...发送AJAX请求
}, 800, 1500)

理论上这样写很完美了，但仍存在一种问题：如果输入框一直在输入文字，文字就一直不会显示出来。我们需要做一个处理：使得文字在超过某个时间间隔后要输出一次。
优化代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function throttle(fn, delay, mustRunDelay){
 	var timer = null;
 	var t_start;
 	return function(){
 		var context = this, args = arguments, t_curr = +new Date();
 		clearTimeout(timer);
 		if(!t_start){
 			t_start = t_curr;
 		}
 		if(t_curr - t_start >= mustRunDelay){
 			fn.apply(context, args);
 			t_start = t_curr;
 		}
 		else {
 			timer = setTimeout(function(){
 				fn.apply(context, args);
 			}, delay);
 		}
 	};
 };

注：本文参考资料