防抖
原理：把一個(gè)高頻觸發(fā)的事件延遲n秒觸發(fā)，在n秒內(nèi)再次觸發(fā)這個(gè)事件的話猪杭，就重新計(jì)算這個(gè)n秒，讓事件避免頻繁觸發(fā)
/*
* 防抖
* 防抖的原理是：把一個(gè)高頻觸發(fā)的事件延遲n秒觸發(fā)吉嚣，在n秒內(nèi)再次觸發(fā)這個(gè)事件的話观话，就重新計(jì)算這個(gè)n秒胃夏，讓事件避免頻繁觸發(fā)
*/
function debounce(fn,delay) {
let timer
return function() {
if(timer) {
clearTimeout(timer)
}
timer = setTimeout(()=>{
fn.apply(this,arguments)
},delay)
}
}
function sayHello() {
console.log('Hello')
// 案例：input框的輸入關(guān)鍵詞搜索
document.getElementById('search').addEventListener('keyup',debounce(sayHello,500))
節(jié)流
原理：讓一個(gè)高頻觸發(fā)的事件在n秒內(nèi)只觸發(fā)一次
/*
* 節(jié)流
* 節(jié)流的原理是：讓一個(gè)高頻觸發(fā)的事件在n秒內(nèi)只觸發(fā)一次
*/
function throttle(fn,dalay) {
let canRun = true
return function() {
if(!canRun) return
canRun = false
setTimeout(() => {
fn.apply(this,arguments)
canRun = true
},dalay)
}
}
function sayHi() {
console.log('Hi')
}
// 案例：input框的輸入關(guān)鍵詞搜索
document.getElementById('search').addEventListener('keyup',throttle(sayHi,1000))
總結(jié)
- 防抖和節(jié)流都是解決高頻觸發(fā)的問題的
- 防抖和節(jié)流的原理不一樣轴或，大部分場(chǎng)景下，兩者任意選擇仰禀，只有特定場(chǎng)景會(huì)更好照雁，總的來說，用哪個(gè)方式答恶，看自己的業(yè)務(wù)需求
- 防抖和節(jié)流肯定不止這一種饺蚊，這里只是最常見的一種
