节流和防抖主要处理事件处理函数高频调用,减少浏览器负担
节流:尽量减少触发次数,mint-ui上封装了一个方法
<script>
var throttle = function (fn, delay) {
var now, lastExec, timer, context, args; //eslint-disable-line
var execute = function () {
fn.apply(context, args);
lastExec = now;
};
return function () {
context = this;
args = arguments;
now = Date.now();
if (timer) {
clearTimeout(timer);
timer = null;
}
console.log(lastExec)
if (lastExec) {
var diff = delay - (now - lastExec);
if (diff < 0) {
execute();
} else {
timer = setTimeout(() => {
execute();
}, diff);
}
} else {
execute();
}
};
};
var scrolls = throttle(aaa, 1000);
function aaa(){
console.log(111111)
}
scrolls();
scrolls();
scrolls();
scrolls();
scrolls();
scrolls();
scrolls();
</script>
throttle 方法return出来一个方法(闭包),所以throttle执行完后,在闭包里使用的局部变量和方法都没有销毁,将每次执行fn的时间记录到lastExec变量中。
第一次时fn会被执行,以后都会有delay时间的限制,delay时间一到就会执行一次事件处理函数。
最后的输出结果是
防抖:当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时。
上来不会执行,当满足指定的时间后才会执行
也就是将几次操作合并为一次操作进行
function debounce(fn, wait) {
var timeout = null;
return function() {
if(timeout !== null) clearTimeout(timeout);
timeout = setTimeout(fn, wait);
}
}
借用别人总结的话:函数节流不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数,而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下,我们需要用户在滚动页面时,每隔一段时间发一次 Ajax 请求,而不是在用户停下滚动页面操作时才去请求数据。这样的场景,就适合用节流技术来实现。