版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_36251118/article/details/88854242
resize,scroll,hover等js事件触发时绑定的方法会被频繁调用,致使页面产生性能问题,所以我们使用函数节流来解这个决问题
//scroll方法中当间隔时间大于2s,do somthing执行一次
window.addEventListener('scroll',function(){
var timer ;//使用闭包,缓存变量
var startTime = new Date();
return function(){
var curTime = new Date();
if(curTime - startTime >= 2000){
timer = setTimeout(function(){
console.log('do somthing')
},500);
startTime = curTime;
}
}
}());
//ES6
/**
* 节流函数
* @param fn Function 触发事件后需要执行的函数
* @param delay String 间隔时间 ms
* */
delayScrollFunc(fn, delay) {
const now = new Date().getTime();
if (now - this.lastScrollCall < delay) return;
this.lastScrollCall = now;
setTimeout(() => {
fn();
}, 60); // 在实际项目中,我发现这里再延迟一点时间执行效果更好(针对监听scroll)
},