防抖

概念:延時一段時間執(zhí)行某個動作,當在這段時間內(nèi)再被觸發(fā)時,清除掉之前的計時重試計時。

eg. 輸入框搜索,就應(yīng)該用防抖,當我連續(xù)不斷輸入時,不會發(fā)送請求;當我一段時間內(nèi)不輸入了,才會發(fā)送一次請求;如果小于這段時間繼續(xù)輸入的話,時間會重新計算,也不會發(fā)送請。

function debounce (fn, time=300) {
    let timer // 緩存一個定時器對象
    return function (...args) {
        // 當觸發(fā)時定時器對象存在,則清除重新計時
         timer && clearTimeout(timer)
         timer = setTimeout(() => {
              fn.apply(this, args) // doSomething
              timer = null
          }, time)
    }
}

適用場景:

  • 按鈕提交場景:防止多次提交按鈕,只執(zhí)行最后提交的一次
  • 服務(wù)端驗證場景:表單驗證需要服務(wù)端配合,只執(zhí)行一段連續(xù)的輸入事件的最后一次,還有搜索聯(lián)想詞功能類似
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 防抖函數(shù)就是避免函數(shù)多次觸發(fā)而生成的函數(shù)。像仿百度搜索,就應(yīng)該用防抖,當我連續(xù)不斷輸入時,不會發(fā)送請求;當我一段時...
    Samuel_閱讀 144評論 0 0
  • 一.什么是函數(shù)防抖&節(jié)流 函數(shù)防抖函數(shù)防抖(debounce):在事件被觸發(fā)n秒后再執(zhí)行回調(diào),如果在這n秒內(nèi)又被觸...
    王蕾_fd49閱讀 552評論 0 1
  • 1、什么是防抖與節(jié)流? 節(jié)流 : 通俗的講就是擰緊水龍頭讓水少流一點,但是不是不讓水流了。想象一下在現(xiàn)實生活中有時...
    懂會悟閱讀 4,394評論 0 3
  • 說到「函數(shù)防抖」和「函數(shù)節(jié)流」,兩者其實概念比較相似。 1.「函數(shù)防抖」(debounce)通俗來說,就是把「多個...
    Jason_Shu閱讀 685評論 0 0
  • 什么是函數(shù)防抖和函數(shù)節(jié)流 函數(shù)防抖(debounce):當事件被觸發(fā)一段時間后再執(zhí)行回調(diào),如果在這段時間內(nèi)事件又被...
    z_yyy閱讀 919評論 0 3

友情鏈接更多精彩內(nèi)容