概述

成都創(chuàng)新互聯(lián)專注于自貢企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站開發(fā),購物商城網(wǎng)站建設(shè)。自貢網(wǎng)站建設(shè)公司,為自貢等地區(qū)提供建站服務(wù)。全流程按需規(guī)劃網(wǎng)站，專業(yè)設(shè)計，全程項目跟蹤，成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

說明

在項目過程中，經(jīng)常會遇到一個按鈕被多次點擊并且多次調(diào)用對應(yīng)處理函數(shù)的問題，而往往我們只需去調(diào)用一次處理函數(shù)即可。有時也會遇到需要在某一規(guī)則內(nèi)有規(guī)律的去觸發(fā)對應(yīng)的處理函數(shù)，所以就需要使用到函數(shù)防抖與函數(shù)節(jié)流來幫助我們實現(xiàn)我們想要的結(jié)果以及避免不必要的問題產(chǎn)生。

函數(shù)防抖(debounce)

定義：當(dāng)持續(xù)觸發(fā)事件時(如連續(xù)點擊按鈕多此)，一定時間段內(nèi)沒有再觸發(fā)事件，事件處理函數(shù)才會執(zhí)行一次，如果設(shè)定的時間到來之前，有一次觸發(fā)了事件，就重新開始延時。

原理：維護(hù)一個計時器，規(guī)定在延時時間后觸發(fā)函數(shù)，但是在延時時間內(nèi)再次被觸發(fā)的話，就取消之前的計時器而重新設(shè)置，這樣就能夠保證只有最后一次操作被觸發(fā)。即將所有操作合并為一個操作進(jìn)行，并且只有最后一次操作是有效操作。

函數(shù)節(jié)流(throttle)

定義：當(dāng)持續(xù)觸發(fā)事件時，保證一定時間段內(nèi)只調(diào)用一次事件處理函數(shù)，按照一定的規(guī)律在某個時間間隔內(nèi)去處理函數(shù)。

原理：原理是通過判斷是否達(dá)到一定時間來觸發(fā)函數(shù)，使得一定時間內(nèi)只觸發(fā)一次函數(shù)。

代碼

函數(shù)防抖

觸發(fā)高頻事件后n秒內(nèi)函數(shù)只會執(zhí)行一次，如果n秒內(nèi)高頻事件再次被觸發(fā)，則重新計算時間

每次觸發(fā)事件時都取消之前的延時調(diào)用方法

function debounce(fn) {
  let timeout = null; // 創(chuàng)建一個標(biāo)記用來存放定時器的返回值
  return function () {
  clearTimeout(timeout); // 每當(dāng)用戶輸入的時候把前一個 setTimeout clear 掉
  timeout = setTimeout(() => { // 然后又創(chuàng)建一個新的 setTimeout, 這樣就能保證輸入字符后的 interval 間隔內(nèi)如果還有字符輸入的話，就不會執(zhí)行 fn 函數(shù)
    fn.apply(this, arguments);
  }, 500);
  };
}
function sayHi() {
  console.log('防抖成功');
}

var inp = document.getElementById('inp');
inp.addEventListener('input', debounce(sayHi)); // 防抖

文章題目：深入了解JavaScript防抖和節(jié)流-創(chuàng)新互聯(lián)
標(biāo)題鏈接：http://weahome.cn/article/jijdi.html