在查看的过程中,如果大家发现有什么问题或者有误的地方,可以在下面的评论或者私信中提出相关的问题,大家一起讨论。
防抖函数:就是在某个时间“后”才能触发事件(一段延迟)。在这个时间内,如果我们再次触发了该事件,则这个时间就会重新开始计算。就类似于在有人进入电梯后,电梯在固定的秒数后就会关门。但是在这个过程中,如果有人又进入了电梯,那么这个关门时间会重新计算(在现有的时间上加上固定的秒数)。对于防抖函数来说,常用的场景有窗口缩小触发的事件、窗口滚动条的滚动事件。
function debounce(fn, delay) {
// 闭包 计时器id
var timer = null;
return function() {
// 清除计时器
clearInterval(timer);
// 执行函数
timer = setTimeout(fn, delay);
}
}
带参数的防抖函数:
function debounde_(fn, delay, ...arg1) {
var timer = null;
return function(...arg2) {
clearInterval(timer);
var othis = this;
var arg = [ ...arg1, ...arg2 ];
timer = setTimeout(function() {
fn.apply(othis, arg);
}, delay);
}
}
节流函数:就是指在一段时间内只能触发一次事件。不管是事件被触发的多么的频繁,但是它总是以固定的频率取触发函数。
function throttle(fn, wait, ...arg1) {
var start = 0;
return function(...arg2) {
var now = new Date().getTime();
var arg = [ ...arg1, ...arg2 ];
if(now - start > wait) {
start = now;
fn.apply(this, arg);
}
}
}
计时器版本:
function throttle(fn, wait, ...arg1) {
var timer = null;
return function(...arg2) {
var othis = this;
var arg = [ ...arg1, ...arg2 ];
if(!timer) {
timer = setTimeout(function(){
fn.apply(othis, arg);
clearInterval(timer);
timer = null;
}, wait);
}
}
}
以上就是函数的节流和防抖的内容,欢迎大家指正。