title: JavaScript的函数节流
date: 2018-10-30 21:37:46
tags: [JavaScript]
categories: JavaScript
前言
我在我的网易云音乐项目中，因搜索歌曲的需求，需要监听输入框的oninput事件。
但后来发现我的数据库接受请求次数有些异常，原来是用户每一次输入过程中都会向后端发送请求，非常浪费性能。
之后搜索并了解到js的函数节流，有效解决了这一问题，便有了这篇博客。
函数节流的原理
函数节流的原理就是定时器。
当我触发一个时间时，先setTimout让这个事件延迟一会再执行，如果在这个时间间隔内又触发了事件，那我们就clear掉原来的定时器，再setTimeout一个新的定时器延迟一会执行，就是这样。
代码实现
定义一个节流函数：
function throttle(fn, delay){
var timer = null;
return function(){
var context = this, args = arguments;
clearTimeout(timer);
timer = setTimeout(function(){
fn.apply(context, args);
}, delay);
};
};
调用：
this.view.$el.on('input', '#search',(e)=>{
event(e)
})
let event = this.throttle((e)=>{
let val = $(e.currentTarget).val()
//...发送AJAX请求
}, 800, 1500)
理论上这样写很完美了，但仍存在一种问题：如果输入框一直在输入文字，文字就一直不会显示出来。我们需要做一个处理：使得文字在超过某个时间间隔后要输出一次。
优化代码：
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);
}
};
};
注：本文参考资料
