函数防抖
场景
假定网站有个搜刮框, 用户输入文本我们会自动遐想匹配出一些效果供用户挑选,我们能够起首想到的做法就是监听keypress事宜, 然后异步查询效果. 然则假如用户疾速的输入了一串字符, 假定是10个字符, 那末就会在霎时触发10次要求, 这无疑不是我们想要的, 我们想要的是用户住手输入的时刻才去触发查询的要求.
道理
函数防抖就是让某个函数在上一次实行后, 满足守候某个时候内不再触发此函数后再实行, 而在这个守候时候内再次触发此函数, 守候时候会从新盘算.
完成
underscore.js的函数防抖定义: _.debounce(fn, wait, [immediate]);
debounce吸收三个参数:
@params fn: 须要举行函数防抖的函数;
@params wait: 须要守候的时候, 单元为毫秒;
@params immediate: 假如为true, 则debounce会在挪用时马上实行一次fn,
而不须要比及wait完毕后.
_.debounce = function(fn, wait, immediate) {
var timeout,
args,
context,
timestamp,
result;
var later = function() {
var last = _.now() - timestamp;
if(last < wait && last >= 0) {
timeout = setTimeout(later, wait - last);
} else {
timeout = null;
if(!immediate) {
result = fn.apply(context, args);
if(!timeout) {
context = args = null;
}
}
}
};
return function() {
context = this;
args = arguments;
timestamp = _.now();
var callNow = immediate && !timeout;
if(!timeout) {
timeout = setTimeout(later, wait);
}
if(callNow) {
result = fn.apply(context, args);
context = args = null;
}
return result;
}
};
// demo:
$('#input').keypress(_.debounce(function() {
//异步挪用查询
}, 300));