防抖节流是什么
防抖debounce:在事件触发n秒后再执行,如果在n秒内又有新的触发,就重新计算
节流throttle:连续事件触发,在指定的时间内,不管触发几次,就只执行一次
使用场景:
防抖:实时搜索(keyup) 、 拖拽(mousemove)、
节流:窗口调整(resize)、页面滚动(scroll)、抢购和疯狂点击(mousedown)、
没有防抖节流实例
let input = document.getElementsByTagName("input")[0];
input.onkeyup = function(){
console.log(this.value);
};
防抖
let input = document.getElementsByTagName("input")[0];
input.onkeyup = debounce(function(){
let input = document.getElementsByTagName("input")[0];
console.log(input.value);
},500);
//防抖
function debounce(fn, time) {
let timer = null;
return function () {
//执行之前,先判断是否有定时器,有就先清除,保证只有一个定时器
if (timer) {
clearTimeout(timer);//清除定时器
}
//在用户输入时,如果停顿了2s,就去调数据
timer = setTimeout(() => {
fn();//触发事件
}, time);//触发时间(2s或.....)
}
}
节流
let input = document.getElementsByTagName("input")[0];
input.onkeyup = throttle(function(){
let input = document.getElementsByTagName("input")[0];
console.log(input.value);
},500);
//节流
function throttle(fn, time) {//连续触发事件 规定的时间
let flag = false;
return function () {
//使用标识判断是否在规定的时间内重复触发了函数,没有就触发,有就不触发
if (!flag) {//不为假时 执行以下
fn();//触发事件
flag = true;//为真
setTimeout(() => {//超时调用(在规定的时间内只执行一次)
flag = false;
}, time);
}
}
}