<button id="throttle">测试函数节流</button>
<button id="debounce">测试函数防抖</button>
//处理事件的回调函数
function handleClick(i) {
console.log("处理点击事件");
console.log(i);
}
函数节流(throttle)
1.理解:
在函数需要频繁触发时:函数执行一次后,只有大于设定的执行周期后
才会执行第二次,适合多次事件按时间做平均分配触发。
2.场景:
窗口调整(resize)
页面滚动(scroll)
DOM 元素的拖拽功能实现(mousemove)
抢购疯狂点击(mousedown)
//实现函数节流
function throttle(callback, delay) {
let start = 0;//必须保存第一次点击立即调用
return function () {//它的this是谁就得让callback()中的this是谁,
//它接收的所有实参都直接交给callback
console.log("throttle 事件");
let current = Date.now();
console.log(current - start);
if (current - start > delay) {//从第2次点击开始,需要间隔时间超过delay
callback.apply(this, arguments);
start = current;
}
}
}
document.getElementById("throttle").onclick = throttle(handleClick, 2000);
函数防抖(debounce)
1.理解:
在函数需要频繁触发时:在规定时间内,只让最后一次生效,
前面的不生效。适合多次事件一次响应的情况
2.场景:
实时搜索联想(keyup)
文本输入的验证(连续输入文字后发生AJAX
请求进行验证,验证一次就好,判断scroll
是否滑到底部,滚动事件+函数防抖
)
//实现函数防抖
function debounce(callback, delay) {
let t = null;
return function () {
//清除待执行的定时器
if (t) {
clearTimeout(t);
t = null
}
//每隔delay的时间,启动一个新的延迟定时器
t = setTimeout(() => {
callback.apply(this, arguments);
//执行完毕后,删除标记
t = null;
}, delay);
}
}
document.getElementById("debounce").onclick = debounce(handleClick, 1000);