1,什么是防抖?
防抖函数就是在函数需要频繁触发的情况时,只有足够空闲时间,才执行一次。类是于公交车在站台上,乘客上车,当最后一个乘客上车后进行计时,一段时间内,如果有乘客上车,就重新计时,直至计时时间内没乘客上车了,就发车。
普遍用于搜索框:
没有进行函数防抖:
<input type="text" id='app'></inpue>
<script>
var oInp = document.getElementById('app');
function ajax () {
console.log(this.value);
}
oInp.oninput = ajax;
</script>
当我们每输入一个字符就会进行打印,这肯定不是我们想要的,我们要的结果是打印最后结果即可,此时就需要进行函数防抖
<input type="text" id='app'></input>
<script>
var oInp = document.getElementById('app');
var timer = null;
function ajax (e) {
console.log(e, this.value);
}
oInp.oninput = function (e) {
var _self = this, _arg = arguments;
clearTimeout(timer);
timer = setTimeout(function (){
ajax.apply(_self, _arg);
}, 1000);
};
</script>
我们在开发项目的时候就有必要封装一个防抖函数
function debounce (handler, delay) { //handler,需要进行防抖的函数;delay,执行handler函数的间隔时间
var timer = null;
return function () {
var _self = this, _arg = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
handler.apply(_self, _arg);
}, delay);
}
}
例如:
<input type="text" id='app'></input>
<script>
var oInp = document.getElementById('app');
function debounce (handler, delay) {
var timer = null;
return function () {
var _self = this, _arg = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
handler.apply(_self, _arg);
}, delay);
}
};
function ajax (e) {
console.log(e, this.value);
};
oInp.oninput = debounce(ajax, 2000);
</script>