惰性函数:
- 表示函数执行的分支只会在函数第一次调用的时候执行,在第一次调用的过程中,该函数被覆盖为另一个按照合适的方式执行的函数,这样对函数的调用就不用再经过原函数执行过程。
var getTimeStamp = function(){
var timeStamp = new Date().getTime();
console.log(1);
getTimeStamp = function(){
console.log(timeStamp);
}
return getTimeStamp();
}
getTimeStamp();
分析:
1.第一次执行var timeStamp &console.log(1)
2.并将原函数重新赋值新函数
3.最后调用函数执行里面的函数体
4.返回函数执行的结果
getTimeStamp();
1.当第二次/N次调用函数时,不会再执行var timeStamp &console.log(1)
2.而是直接执行被赋值的新函数
getTimeStamp();
惰性函数的作用:
- 一般来说,函数里的功能是不变的,但惰性函数第一次执行的时候会改变自身函数里的功能
应用场景: 防抖 、 节流 -- 不用声明全局变量污染全局
var btn = document.getElementById('btn');
btn.onclick = debounce(function(){
console.log( new Date().getTime() );
}, 300);
function debounce(cb, delay=500){
var timer = null;
debounce = function(){
clearTimeout(timer);
timer = setTimeout(cb, delay);
}
return debounce;
}
btn.onclick = throttle(
function(){
console.log(1)
},
1500
);
function throttle(cb, delay=300){
var lastTime = new Date().getTime();
throttle = function(){
var now = new Date().getTime();
if(now - lastTime > delay){
cb();
lastTime = now;
}
}
return throttle;
}
var timer; 原本需要声明一个全局变量来清除timeout
function debounce(cb, delay){
clearTimeout(timer);
timer = setTimeout(()=>{
cb();
},delay)
}
网友评论