针对高频度触发事件问题(例如页面 scroll ,屏幕 resize,监听用户输入等)。有两种常用的解决方法,防抖和节流。
一、防抖动
防抖就是在一段时间内如果一直触发着滚动事件,则handler函数不会触发。而是等到规定的时间段内没有监听到滚动事件再触发最后的handler函数,之前的handler函数则被清除不会触发。防抖技术即是可以把多个顺序地调用合并成一次,也就是在一定时间内,规定事件被触发的次数。
function debounce(func,wait,immediate) {
var timeout;
return function(){
clearTimeout(timeout);
timeout=setTimeout(func, wait);
}
}
function realFunc() {
console.log("success");
}
window.addEventListener('scroll', realFunc); //无防抖动
window.addEventListener('scroll', debounce(realFunc,500)); //有防抖
二、函数节流
只允许一个函数在x毫秒内执行一次,只有当上一个函数执行过了规定的时间间隔,下一个函数才会被执行。
与防抖相比,节流函数最主要的不同在于它保证在 X 毫秒内至少执行一次我们希望触发的事件 handler。与防抖相比,节流函数多了一个 mustRun 属性,代表 mustRun 毫秒内,必然会触发一次 handler ,同样是利用定时器
function throttle(func, wait, mustRun) {
var timeout,
startTime = new Date();
return function() {
var context = this,
args = arguments,
curTime = new Date();
clearTimeout(timeout);
// 如果达到了规定的触发时间间隔,触发 handler
if(curTime - startTime >= mustRun){
func.apply(context,args);
startTime = curTime;
// 没达到触发间隔,重新设定定时器
}else{
timeout = setTimeout(func, wait);
}
};
};
// 实际想绑定在 scroll 事件上的 handler
function realFunc(){
console.log("Success");
}
// 采用了节流函数
window.addEventListener('scroll',throttle(realFunc,500,1000));
3.图片的懒加载就是利用了函数节流的思想。