防止用户短时间内多次触发事件，导致没必要的性能消耗，以致网页卡顿，甚至浏览器崩溃 >>防抖&节流
防抖
应用：实时搜索，拖拽
思路：setTimeout，过一段时间再触发，每一次触发先clearTimeout把上一次的计时清除。
<input type="text">
const inp = document.getElementsByTagName('input')[0];
// handler
function ajax(e) {
console.log(e,this.value);
}
//onchange要失去焦点才触发，oninput输入字符就触发
inp.oninput = debounce(ajax,1000);
// 防抖 debounce(handler, timeout);
function debounce(handler,timeout) {
let timer = null;
// 返回一个实际的事件处理函数
return function () {
console.log(timer);
clearTimeout(timer);
let event = arguments,
_self = this;
timer = setTimeout(() => {
handler.apply(_self, arguments);
}, timeout);
}
}
缺点：要等够那个时间才会执行handler
节流
应用：窗口调整、页面滚动、抢购疯狂点击
思路：在一个周期内，只触发一次
<div id="show">0</div>
<button id="btn">click</button>
let show = document.getElementById('show');
let btn = document.getElementById('btn');
btn.onclick = throttle(buy, 1000);
// handler
function buy() {
show.innerText = parseInt(show.innerText) + 1;
}
//节流
function throttle(handler,wait) {
let lastTime = 0;
return function () {
let nowTime = new Date().getTime();
if (nowTime - lastTime > wait) {
// 第一次的nowTime肯定大wait于lastTime
handler.apply(this,arguments);
lastTime = nowTime;
}
}
}
