函数防抖
含义:函数防抖是在函数需要频繁触发情况时,只要有足够空闲的时间,才执行一次。类似于公交司机会等人都上车了才出站一样。
场景:
1、实时搜索
2、拖拽
代码:
/*
* debounce: 函数防抖
* hander:调用函数
* delay: 延迟时间
*/
function debounce(hander, delay){
var timer = null;
return function(){
var _self = this, _arg = arguments;
clearTimeout(timer)
timer = setTimeout(function(){
hander.apply(_self, _arg);
}, delay);
}
}
函数节流
含义:函数节流就是预定一个函数只有在大于等于执行周期时才会执行的,周期内不执行,类似于水滴攒到一定的重量才会落下一样。
场景:
1、窗口调整
2、页面滚动
3、 抢购疯狂点击(mousedown)
代码:
/*
* throttle: 函数节流
* hander: 事件处理函数
* wait: 间隔时间
*/
function throttle(hander, wait){
var lastTime = 0;
return function(e){
var nowTime = new Date().getTime()
if (nowTime - lastTime > wait) {
hander.apply(this, arguments);
lastTime = nowTime;
}
}
}
setInterval(throttle(function(){
console.log('Hello, world!');
}, 300));
应用: