前言
首先這是來自一道小組的面試題目茶行，當小組伙伴出了這個題目，我首先是詫異這是啥高級玩意，后來被解釋到就是為了防止連續(xù)點擊呵俏，我心里想這不是很簡單的策略就可以限制的嗎，還有一個新的名詞滔灶，太專業(yè)了普碎。第一時間思考了一下，如何實現(xiàn)录平，是取最后一次還是定時取第一次麻车？貌似在很多場景都是合理的，比如input輸入更新斗这，和按鈕的連續(xù)點擊....
看了幾個博客动猬，加上之前的腦補，是時候總結一下了.....
防抖
函數(shù)防抖（debounce）（連續(xù)觸發(fā)只發(fā)生一次）
理解：連續(xù)觸發(fā)一事件表箭，取最后一次觸發(fā)并讓事件發(fā)生赁咙，這里的限制是要有指定的時間間隔，簡言之一定時間間隔沒有再次觸發(fā)就執(zhí)行一次處理函數(shù)免钻。
案例：連續(xù)點擊按鈕序目，并不是立即執(zhí)行按鈕按下要觸發(fā)的處理函數(shù)，當1s內(nèi)沒有觸發(fā)新的點擊事件時伯襟，才會延時觸發(fā)一次處理函數(shù)猿涨。
定義：
// 定義
function debounce(func, wait) {
let timeout = null
return function() {
if(timeout !== null) clearTimeout(timeout)
timeout = setTimeout(func, wait);
}
}
使用：
// html
<div @click="onClick($event)" > </div>
// js
function handle() {
console.log(Math.random())
}
// 申請一個按鈕處理函數(shù)
function btnClick = debounce(handle, 1000)
// 按鈕點擊事件
function onClick(){
btnClick()
}
實際使用就是：
- 定義處理函數(shù)和時間間隔
- 申請新的防抖函數(shù)
- 在點擊事件中調(diào)用“申請的防抖函數(shù)”
不通用的快速寫法
// html
<div @click="onClick($event)" > </div>
// js
// timeout定義在onClick外層作用域
let timeout = null
// 按鈕點擊事件
function onClick(){
if(timeout !== null) clearTimeout(timeout)
timeout = setTimeout(
function(){
// 處理策略
},
wait);
}
函數(shù)節(jié)流（throttle）（連續(xù)觸發(fā)，均勻發(fā)生多次姆怪，即使最后一個時間間隔只觸發(fā)一次也保證發(fā)生）
理解：連續(xù)觸發(fā)一事件且都會執(zhí)行叛赚，會造成資源浪費、頁面卡頓等稽揭，防抖可以解決這一問題俺附，但是防抖沒有保證事件在一定時間內(nèi)肯定能發(fā)生一下，所以會有函數(shù)節(jié)流的概念溪掀，函數(shù)節(jié)流就是保證指定間隔里真正處理的事件最多只有一次事镣，即在規(guī)定時間內(nèi)減少函數(shù)執(zhí)行次數(shù)。
案例：連續(xù)點擊按鈕揪胃，并不是立即執(zhí)行按鈕按下要觸發(fā)的處理函數(shù)璃哟，當1s內(nèi)都沒有實際處理就觸發(fā)處理函數(shù)，簡單說連續(xù)觸發(fā)保證1s內(nèi)發(fā)生一次喊递，沒有事件就不觸發(fā)随闪。
定義：
function throttle(func, delay, duration){
var timer = null;
var begin = new Date();
return function(){
var context = this, args = arguments;
var current = new Date();
clearTimeout(timer);
if(current - begin >= duration){
func.apply(context, args);
begin = current;
}else{
timer = setTimeout(function(){
func.apply(context, args);
},delay);
}
}
}
使用：
// html
<div @click="onClick($event)" > </div>
// js
function handle() {
console.log(Math.random())
}
// 申請一個按鈕處理函數(shù)
function btnClick = throttle(handle, 100，500)
// 按鈕點擊事件
function onClick(){
btnClick()
}
總結
函數(shù)防抖（debounce）（連續(xù)觸發(fā)只發(fā)生一次）
函數(shù)節(jié)流（throttle）（連續(xù)觸發(fā)骚勘，均勻發(fā)生多次铐伴，即使最后一個時間間隔只觸發(fā)一次也保證發(fā)生）
