防抖函數

概念解讀:

在頻繁觸發的狀況下,只有足夠的空閒時間,才執行代碼一次。
生活例子:坐公交,就是必定時間內,若是有人陸續刷卡上車,司機就不會開車。只有別人沒刷卡了,司機纔開車。ajax

應用場景:

一、搜索輸入框(監聽keyup和keydown事件,請求次數過於平凡會增長服務器壓力。可讓用戶1s內不在輸入內容,才向服務器發起請求。)瀏覽器

clipboard.png

二、window觸發resize的時候,不斷的調整瀏覽器窗口大小會不斷的觸發這個事件,用防抖來讓其只觸發一次服務器

函數方法

function debounce(func, wait) {
  let timeout = null
  return function() {
    clearTimeout(timeout)
    timeout = setTimeout(() => {
      func.apply(this, arguments)
    }, wait)
  }
}

//調用
function getData() { 
  ... // ajax
}
documentElement.addEventListener('keyup', debounce(getData, 1000));
相關文章
相關標籤/搜索