函数节流:一定时间内控制函数只能执行一次。
函数不可高频率执行
应用场景onscroll
// 函数节流
var canRun = true;
document.getElementById("throttle").onscroll = function(){
if(!canRun){
// 判断是否已空闲,如果在执行中,则直接return
return;
}
canRun = false;
setTimeout(function(){
console.log("函数节流");
canRun = true;
}, 300);
};
函数防抖:是指频繁触发的情况下,只有足够的空闲时间,才执行代码一次。
只要在连续触发就不执行
应用场景:用户输入时的校验onkeydown
// 函数防抖
var timer = false;
document.getElementById("debounce").onscroll = function(){
clearTimeout(timer); // 清除未执行的代码,重置回初始化状态
timer = setTimeout(function(){
console.log("函数防抖");
}, 300);
};
网友评论