函数节流:就如同成都摇号买房,前一个进去选房了,下一个就要等一段时间。这种策略就很好的解决了,一大波人进去选房,销售妹妹没发接待的尴尬局面。
应用场景:监听浏览器滚动条,然后触发函数。
// 普通做法
document.getElementById("throttle").onscroll = function(){
//监听到滚动就直接触发,不停滚动就不停触发
callback();
};
// 函数节流
var canRun = true;
document.getElementById("throttle").onscroll = function(){
//通过设置锁,一段时间只让一个妹纸进来,多了应付不了,你懂得:)
if(!canRun){
return;
}
canRun = false;
setTimeout(function(){
console.log("函数节流");
canRun = true;
}, 300);
};
函数防抖动: 就如同选妹子,来了一队列妹子让你选,你只选最后一个,因为前面的太丑了。
应用场景: input 设置了onChange 事件,一旦有改动,就会触发change事件,不停改动,就不停触发。其实,我们只需要最后输入的值。
// 函数防抖
var timer = false;
document.getElementById("input").onchange = function(){
clearTimeout(timer); // 清除未执行的代码,重置回初始化状态
timer = setTimeout(function(){
console.log("函数防抖");
}, 300);
};