节流
和防抖
都是用来控制某些函数的调用频率。举个例子,在窗口resize
的时候,由于可视区变大,我们可能需要向服务器请求更多内容来填充可视区。但可视区变大的过程中,resize
事件会被触发多次...每次触发都去请求一次的话没有必要...这时就需要节流防抖
来做控制function resize(e) { console.log("窗口大小改变了"); } window.addEventListener('resize', resize);
可以直接使用插件lodash.js(不知道我拼的英文对不对)
节流(throttle)
- 时间戳版
function throttle(func, delay) {
var last = 0;
return function () {
var now = Date.now();
if (now >= delay + last) {
func.apply(this, arguments);
last = now;
} else {
console.log("距离上次调用的时间差不满足要求哦");
}
}
}
- 定时器版
function throttle(func, delay) {
var timer = null;
return function () {
if (!timer) {
func.apply(this, arguments);
timer = setTimeout(() => {
timer = null;
}, delay);
} else {
console.log("上一个定时器尚未完成");
}
}
}
防抖(debounce)
防抖
和节流
不同的地方在于,函数在一段时间内的多次调用,仅使得最后一次调用有效。
function debounce(func, delay) {
var timeout;
return function() {
clearTimeout(timeout);
timeout = setTimeout(()=>{
func.apply(this, arguments);
}, delay);
}
}