防抖:
就是在函数需要频繁触发时,只有经过足够的时间后,才执行一次。
好像公交司机会等人都上车后才出站一样。
应用场景:
1.实时搜索
2.拖拽
以实时搜索为例子:
以百度的实时搜索,我输入NBA的过程中,如果不做防抖处理的话,就会每次输入一个数据,就会发送一个网络请求个服务器,请求相关关键字的数据,在把页面渲染出来。但是,我们的本质是想要搜索NBA,在输入NBA的过程中,一定会触发3次input事件,但是针对发送请求来讲,前面两次发送数据请求是没有必要的。我们可以直接等最后一次输入完A后,在发送数据请求。那么,这个时候,我们就要在代码中做出相应的处理
代码封装:
关键点:倒计时器,闭包,this指向,不定参数
function debounce(fn, delay) {
var timer = null;
return function() {
clearTimeout(timer);
var self = this;
var args = arguments;
timer = setTimeout(function() {
fn.apply(self, args);
}, delay)
}
}
案例:
(需要你自己把下面代码放在html文件,js文件中,代码只是最核心代码)
html代码:
<input type="text" id="inp">
// 没有防抖处理的代码
var oInp = document.getElementById('inp');
function ajax () {
console.log(this.value);
}
oInp.oninput = ajax;
// 防抖处理代码
var oInp = document.getElementById('inp');
var timer = null;
function ajax (e) {
console.log(e, this.value);
}
oInp.oninput = function(e) {
var args = arguments;
var self = this;
clearTimeout(timer);
// this执行,事件源对象e的问题
timer = setTimeout(function() {
ajax.apply(self, args);
}, 1000);
}
希望通过这篇文章,你对防抖有一个清楚的了解,防抖是一种性能优化的技巧,对你以后页面优化大有好处。
如果你对防抖也不太了解,可以看我的另外一篇文章:
如果文章内容有错误的地方,请及时指出,谢谢大家,我们一起成长。