节流：每隔一段时间触发一次
<input type="text" id="input" />
// 方法一：
function throttle(fn,delay){
let valid = true
return function() {
if(!valid){
return false
}
valid = false
setTimeout(() => {
fn()
valid = true;
}, delay)
}
}
// 方法二：
function throttle(fn, wait) {
let time = null;
return function() {
if (!time) {
time = setTimeout(() => {
time = null;
fn();
}, wait);
}
};
}
// 一直输入，每隔两秒触发一次fn
let oInput = document.getElementById("input");
oInput.oninput = throttle(fn, 2000);
防抖：在一段时间里，只触发一次。
<input type="text" id="input" />
function debounce(fn,delay){
let timer = null //借助闭包
return function() {
if(timer){
clearTimeout(timer)
}
timer = setTimeout(fn,delay)
}
}
// 一直输入，不会触发fn,只有停止输入2秒后，才会触发一次fn
let oInput = document.getElementById("input");
oInput.oninput = debounce(function(){
console.log(123)
}, 2000);
