函數(shù)的防抖與節(jié)流-js

函數(shù)函數(shù)我們先來看一看防抖和節(jié)流比較精煉的定義：

防抖：指觸發(fā)事件后在 n 秒內(nèi)函數(shù)只能執(zhí)行一次秩铆，如果在 n 秒內(nèi)又觸發(fā)了事件功氨，則會重新計算函數(shù)執(zhí)行時間。

節(jié)流：連續(xù)發(fā)生的事件在n秒內(nèi)只執(zhí)行一次

相信鲤妥，看完上面說的定義后庶橱，有些人還是不能很好的明白他們之間的區(qū)別，那么就接下來談一談我對它們的理解吧童擎。

防抖（debounce）

防抖防抖滴劲，顧名思義，就是防止手抖么顾复，你想一下你手抖會干什么（班挖？？芯砸？停止開車）比如一個按鈕萧芙，點一下向服務(wù)器發(fā)送一個請求，你手一抖假丧，點了好幾下双揪，一下就向服務(wù)器發(fā)了好幾次請求，這不浪費時間資源么包帚。這時候渔期，就要有個防抖函數(shù)來幫幫你了。

當(dāng)你點擊這個按鈕后渴邦，不管你手怎么抖疯趟，一直抖個不停的點這個按鈕，都只向服務(wù)器發(fā)送一次請求谋梭，只有過了一段時間后迅办，確定了你手不再抖后（在這一段時間你都沒有再點這個按鈕），你再去點擊這個按鈕章蚣，才會再次向服務(wù)器發(fā)送請求站欺。

下面分析一下代碼姨夹，你一定會更加的明白：

/*
@function 防抖函數(shù)（最后執(zhí)行）
@param func {Function} 要執(zhí)行的函數(shù)
@para wait {Number} 判斷手不抖的時間
*/
const debounce=(func,wait)=>{
    let timeout;    //不能定義到里面，否則每次調(diào)用里面的函數(shù)矾策，都會對timeout重新賦值
    return function(){
        if(timeout) clearTimeout(timeout) //這里使用timeout產(chǎn)生了閉包
        timeout = setTimeout(function(){
            func.apply(this)
        },wait)
    }
}
function btnClick(){
    console.log('發(fā)送一次請求')
}
$('#myBtn').click(debounce(btnClick,3000));

首先會執(zhí)行第18行的debounce函數(shù)磷账，返回一個匿名函數(shù)作為按鈕點點擊的回調(diào)。當(dāng)點擊一次按鈕的時候贾虽，timeout為undefined逃糟，會執(zhí)行第10行的代碼，設(shè)置一個定時器蓬豁。當(dāng)你手抖（在wait時間內(nèi)有點擊了按鈕）的時候绰咽，會執(zhí)行第9行，將上一個定時器清除地粪，然后再設(shè)置一個新的定時器取募。只有你手不抖了（在wait時間內(nèi)沒有點擊按鈕），就會執(zhí)行第11行蟆技，執(zhí)行點擊按鈕所要發(fā)送的請求服務(wù)玩敏。

可以看出來，這個防抖函數(shù)质礼，是再確定你手不抖前的最后一次點擊才發(fā)送的請求數(shù)據(jù)旺聚。但有時候你并不想這樣啊，你覺得眶蕉，當(dāng)我第一次點擊的時候就要發(fā)送數(shù)據(jù)砰粹，至于后面我手抖，你控制不讓我發(fā)不久好了造挽，這樣我手抖的時候碱璃，發(fā)現(xiàn)數(shù)據(jù)已經(jīng)請求過來了，我一高興刽宪，手不就不抖了厘贼，好的，滿足你的要求圣拄。

/*
@function 防抖函數(shù)（最初執(zhí)行）
@param func {Function} 要執(zhí)行的函數(shù)
@para wait {Number} 判斷手不抖的時間
*/
const debounce=(func,wait)=>{
    let timeout;    
    return function(){
        if(timeout){
            clearTimeout(timeout);
        }else{
            func.apply(this)
        }
         timeout = setTimeout(function(){
            timeout =null
        },wait)
    }
}
function btnClick(){
    console.log('發(fā)送一次請求')
}
$('#myBtn').click(debounce(btnClick,3000));

相當(dāng)于嘴秸，在第一次點擊，還沒有設(shè)置定時器的時候庇谆，就先執(zhí)行請求數(shù)據(jù)的函數(shù)岳掐，然后設(shè)置定時器用來防抖，后面不管怎么抖饭耳，timeout值都存在串述，只有再不抖后，才會將timeout設(shè)置為null寞肖，然后再點擊的時候就又能請求數(shù)據(jù)了纲酗。

節(jié)流(throttle)

節(jié)流節(jié)流衰腌，顧名思義就是節(jié)省流量了，你想想觅赊，怎么才能節(jié)省流量右蕊。那不就減少請求唄。1秒請求3次吮螺，我改成3秒請求1次饶囚，那流量還不妥妥的節(jié)省下來了。就比如鸠补，你一個搜索框萝风，按一下鍵盤向服務(wù)器發(fā)送一次請求，卡卡的紫岩，頁面一直跟著你敲鍵盤在變化规惰，你給老板說，看帥不被因，實時動態(tài)搜索卿拴，這時候老板上來就給你兩耳刮子衫仑，說著梨与，我可算知道為啥一個小項目就要買這么好的服務(wù)器了，都是你這玩意霍霍的文狱。這時候粥鞋，節(jié)流就能幫助到你了，設(shè)置個時間瞄崇，這個時間內(nèi)呻粹，不管怎么敲鍵盤，只請求一次數(shù)據(jù)苏研，差不多輸一個單詞請求一次等浊，大大節(jié)省了后臺的壓力，你的動態(tài)搜索也能夠很好的實現(xiàn)摹蘑。

估計這個還是比較好理解的筹燕，直接看代碼就好了。

/*
@function 節(jié)流函數(shù)
@param func {Function} 要執(zhí)行的函數(shù)
@para wait {Number} 時間間隔
*/
const throttle=(func,wait)=>{
    let previous  = 0;
    return function(){
        let nowtime = Date.now();
        if(nowtime-previous>wait){
            func.apply(this);
            previous = nowtime;
        }
    }
}
function keyUp(){
    console.log('搜索一次')
}
$('#myInput').keyup(throttle(btnClick,1000));

這個代碼也比較好理解衅鹿，每次按鍵抬起的時候撒踪，都會判斷當(dāng)前的時間和上一次執(zhí)行搜索功能的時間的差值，判斷要不要再進(jìn)行一次搜索大渤。

好了制妄，函數(shù)的防抖與節(jié)流的區(qū)別和實現(xiàn)應(yīng)該很清楚了。

最后不得不感慨泵三，中華文化的博大精深以及前輩們翻譯時的智慧耕捞，debounce與throttle對應(yīng)防抖與節(jié)流衔掸，讓這兩個很容易搞混的概念一下子就變得如此清晰。