防抖函數(shù)

CarterLi 發(fā)布于2019-08-26 13:32 / 1979人閱讀

摘要：只有別人沒刷卡了，司機(jī)才開車。應(yīng)用場景搜索輸入框監(jiān)聽和事件，請求次數(shù)過于平凡會(huì)增加服務(wù)器壓力?？梢宰層脩魞?nèi)不在輸入內(nèi)容，才向服務(wù)器發(fā)起請求。觸發(fā)的時(shí)候，不斷的調(diào)整瀏覽器窗口大小會(huì)不斷的觸發(fā)這個(gè)事件，用防抖來讓其只觸發(fā)一次函數(shù)方法調(diào)用

概念解讀：

在頻繁觸發(fā)的情況下，只有足夠的空閑時(shí)間，才執(zhí)行代碼一次。
生活例子：坐公交，就是一定時(shí)間內(nèi)，如果有人陸續(xù)刷卡上車，司機(jī)就不會(huì)開車。只有別人沒刷卡了，司機(jī)才開車。

應(yīng)用場景：

1、搜索輸入框（監(jiān)聽keyup和keydown事件，請求次數(shù)過于平凡會(huì)增加服務(wù)器壓力?？梢宰層脩?s內(nèi)不在輸入內(nèi)容，才向服務(wù)器發(fā)起請求。）

2、window觸發(fā)resize的時(shí)候，不斷的調(diào)整瀏覽器窗口大小會(huì)不斷的觸發(fā)這個(gè)事件，用防抖來讓其只觸發(fā)一次

函數(shù)方法

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

//調(diào)用
function getData() { 
  ... // ajax
}
documentElement.addEventListener("keyup", debounce(getData, 1000));

GPU云服務(wù)器云服務(wù)器防抖 VUE防抖 VUE防抖與節(jié)流函數(shù)中定義函數(shù)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/109002.html

相關(guān)文章

徹底弄懂函數(shù)防抖和函數(shù)節(jié)流

摘要：若時(shí)間差大于間隔時(shí)間，則立刻執(zhí)行一次函數(shù)。不同點(diǎn)函數(shù)防抖，在一段連續(xù)操作結(jié)束后，處理回調(diào)，利用和實(shí)現(xiàn)。函數(shù)防抖關(guān)注一定時(shí)間連續(xù)觸發(fā)的事件只在最后執(zhí)行一次，而函數(shù)節(jié)流側(cè)重于一段時(shí)間內(nèi)只執(zhí)行一次。原博客地址，歡迎star 函數(shù)防抖和節(jié)流函數(shù)防抖和函數(shù)節(jié)流：優(yōu)化高頻率執(zhí)行js代碼的一種手段，js中的一些事件如瀏覽器的resize、scroll，鼠標(biāo)的mousemove、mouseover...

Mr_houzi 2019-08-26 13:33 評論0 收藏0
JS進(jìn)階篇2---函數(shù)防抖（debounce）

摘要：函數(shù)防抖的要點(diǎn)，是需要一個(gè)來輔助實(shí)現(xiàn)，延遲運(yùn)行需要執(zhí)行的代碼。若計(jì)時(shí)期間事件沒有被重新觸發(fā)，等延遲時(shí)間計(jì)時(shí)完畢，則執(zhí)行目標(biāo)代碼。而非立即執(zhí)行版指的是觸發(fā)事件后函數(shù)會(huì)立即執(zhí)行，然后秒內(nèi)不觸發(fā)事件才能繼續(xù)執(zhí)行函數(shù)的效果。。 JS中的函數(shù)防抖一、什么是函數(shù)防抖概念：函數(shù)防抖（debounce），就是指觸發(fā)事件后，在 n 秒內(nèi)函數(shù)只能執(zhí)行一次，如果觸發(fā)事件后在 n 秒內(nèi)又觸發(fā)了事件，則會(huì)重...

zhongmeizhi 2019-08-23 18:19 評論0 收藏0
初探函數(shù)節(jié)流和函數(shù)防抖—以項(xiàng)目為例(更新es6語法)

摘要：而上述兩種方法，就叫做函數(shù)的節(jié)流和防抖。二函數(shù)節(jié)流和函數(shù)防抖函數(shù)節(jié)流函數(shù)節(jié)流函數(shù)節(jié)流是讓這個(gè)函數(shù)在間隔某一段時(shí)間執(zhí)行一次。在這個(gè)項(xiàng)目中，我認(rèn)為函數(shù)節(jié)流和函數(shù)防抖都能很好的解決問題。一項(xiàng)目需求最近在做一些小的練手代碼的時(shí)候，碰到了一個(gè)很常見的問題，當(dāng)在搜索框中進(jìn)行搜索的時(shí)候，如果快速輸入很多字符的話，搜索框的監(jiān)聽回調(diào)函數(shù)會(huì)執(zhí)行很多次，如果回調(diào)業(yè)務(wù)較復(fù)雜的話，可能會(huì)導(dǎo)致頁面運(yùn)行緩慢甚...

趙連江 2019-08-20 17:03 評論0 收藏0
前端進(jìn)擊的巨人（八）：淺談函數(shù)防抖與節(jié)流

摘要：隆重請出主角防抖與節(jié)流。防抖與節(jié)流的異同相同都是防止某一時(shí)間段內(nèi)，函數(shù)被頻繁調(diào)用執(zhí)行，通過時(shí)間頻率控制，減少回調(diào)函數(shù)執(zhí)行次數(shù)，來實(shí)現(xiàn)相關(guān)性能優(yōu)化。參考文章分鐘理解的節(jié)流防抖及使用場景函數(shù)防抖和節(jié)流 showImg(https://segmentfault.com/img/bVburM8?w=800&h=600); 本篇課題，或許早已是爛大街的解讀文章。不過春招系列面試下來，不少伙伴們還...

_Zhao 2019-08-23 15:37 評論0 收藏0
說說JavaScript中函數(shù)的防抖 (Debounce) 與節(jié)流 (Throttle)

摘要：基礎(chǔ)防抖我們現(xiàn)在寫一個(gè)最基礎(chǔ)的防抖處理標(biāo)記事件也做如下改寫現(xiàn)在試一下，我們會(huì)發(fā)現(xiàn)只有我們停止?jié)L動(dòng)秒鐘的時(shí)候，控制臺才會(huì)打印出一行隨機(jī)數(shù)。為何要防抖和節(jié)流有時(shí)候會(huì)在項(xiàng)目開發(fā)中頻繁地觸發(fā)一些事件,如 resize、 scroll、 keyup、 keydown等，或者諸如輸入框的實(shí)時(shí)搜索功能，我們知道如果事件處理函數(shù)無限制調(diào)用，會(huì)大大加重瀏覽器的工作量，有可能導(dǎo)致頁面卡頓影響體驗(yàn)；后臺...

yanwei 2019-08-23 18:10 評論0 收藏0
詳談js防抖和節(jié)流

摘要：本文會(huì)分別介紹什么是防抖和節(jié)流，它們的應(yīng)用場景，和實(shí)現(xiàn)方式。防抖和節(jié)流都是為了解決短時(shí)間內(nèi)大量觸發(fā)某函數(shù)而導(dǎo)致的性能問題，比如觸發(fā)頻率過高導(dǎo)致的響應(yīng)速度跟不上觸發(fā)頻率，出現(xiàn)延遲，假死或卡頓的現(xiàn)象。本文由小芭樂發(fā)表 0. 引入首先舉一個(gè)例子：模擬在輸入框輸入后做ajax查詢請求，沒有加入防抖和節(jié)流的效果，這里附上完整可執(zhí)行代碼：沒有防抖 ...

shevy 2019-08-23 13:54 評論0 收藏0