節(jié)流閥和去抖動的基本實現(xiàn)

sPeng 發(fā)布于2019-08-23 16:53 / 2116人閱讀

摘要：節(jié)流閥觸發(fā)的事件以周期的形式去執(zhí)行，而非實時。如滴水的水龍頭。利用閉包變量時效性不執(zhí)行不執(zhí)行不需要時釋放內(nèi)存去抖動事件最后一次觸發(fā)的毫秒后觸發(fā)，如電梯門。

節(jié)流閥throttle

觸發(fā)的事件以周期的形式去執(zhí)行，而非實時。如滴水的水龍頭。

function throttle (fn, delay) {
  // 利用閉包變量時效性
  let timeout
  let arg
  return function () {
    arg = arguments
    if (!timeout) {
      timeout = setTimeout(() => {
        fn.apply(this, arg)
        timeout = null
      }, delay)
    }
  }
}
// demo
/*
var test = throttle(function (a) {console.log(a)}, 1000)
test(1) // 不執(zhí)行
test(2) // 不執(zhí)行
test(3)
=> 3
test = null // 不需要時釋放內(nèi)存
*/

去抖動debounce

事件最后一次觸發(fā)的N毫秒后觸發(fā)，如電梯門。

function debounce (fn, delay){
  let timeout
  return function(){
    const args = arguments
    clearTimeout(timeout)
    timeout = setTimeout(() => {
      fn.apply(this, args)
    }, delay)
  }
}
// 用法同throttle

GPU云服務(wù)器云服務(wù)器節(jié)流閥函數(shù)節(jié)流節(jié)流基本的html

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/103454.html

相關(guān)文章

JavaScript 五十問——認真聊一聊去抖與節(jié)流

摘要：前言無論是面試還是在討論瀏覽器優(yōu)化過程中，都會涉及到去抖動和節(jié)流的問題。總的來說，這二者是一種限制事件觸發(fā)頻率的方式。不同的是，節(jié)流會指定事件觸發(fā)的時間間隔而去抖動會指定事件不觸發(fā)的時間間隔。前言無論是面試還是在討論瀏覽器優(yōu)化過程中，都會涉及到去抖動和節(jié)流的問題。總的來說，這二者是一種限制事件觸發(fā)頻率的方式。不同的是，節(jié)流會指定事件觸發(fā)的時間間隔；而去抖動會指定事件不觸發(fā)的時間間隔...

chadLi 2019-08-02 14:05 評論0 收藏0
JavaScript 五十問——認真聊一聊去抖與節(jié)流

摘要：前言無論是面試還是在討論瀏覽器優(yōu)化過程中，都會涉及到去抖動和節(jié)流的問題。總的來說，這二者是一種限制事件觸發(fā)頻率的方式。不同的是，節(jié)流會指定事件觸發(fā)的時間間隔而去抖動會指定事件不觸發(fā)的時間間隔。前言無論是面試還是在討論瀏覽器優(yōu)化過程中，都會涉及到去抖動和節(jié)流的問題。總的來說，這二者是一種限制事件觸發(fā)頻率的方式。不同的是，節(jié)流會指定事件觸發(fā)的時間間隔；而去抖動會指定事件不觸發(fā)的時間間隔...

EscapedDog 2019-08-23 14:38 評論0 收藏0
前端常用代碼片段(三)

摘要：可以是數(shù)字或者是字符串如果是數(shù)字則表示屬性名前加上空格符號的數(shù)量，如果是字符串，則直接在屬性名前加上該字符串。最后更新于2019年1月13日前端常用代碼片段(一) 點這里前端常用代碼片段(二) 點這里前端常用代碼片段(三) 點這里前端常用代碼片段(四) 點這里前端常用代碼片段(五) 點這里前端常用代碼片段(六) 點這里 1.打亂數(shù)組中元素順序（類似音樂隨機播放） function...

U2FsdGVkX1x 2019-08-21 16:25 評論0 收藏0
JavaScript 函數(shù)節(jié)流和函數(shù)去抖應(yīng)用場景辨析

摘要：函數(shù)節(jié)流和去抖的出現(xiàn)場景，一般都伴隨著客戶端的事件監(jiān)聽。函數(shù)節(jié)流的核心是，讓一個函數(shù)不要執(zhí)行得太頻繁，減少一些過快的調(diào)用來節(jié)流。概述也是好久沒更新源碼解讀，看著房價蹭蹭暴漲，心里也是五味雜陳，對未來充滿恐懼和迷茫 ...（敢問一句你們上岸了嗎）言歸正傳，今天要介紹的是 underscore 中兩個重要的方法，函數(shù)節(jié)流和函數(shù)去抖。這篇文章不會涉及具體的代碼實現(xiàn)（關(guān)于代碼實現(xiàn)請期...

ZHAO_ 2019-08-21 14:35 評論0 收藏0
防抖動與節(jié)流

摘要：防抖動節(jié)流節(jié)流使得一定時間內(nèi)只觸發(fā)一次函數(shù)。它和防抖動最大的區(qū)別就是，節(jié)流函數(shù)不管事件觸發(fā)有多頻繁，都會保證在規(guī)定時間內(nèi)一定會執(zhí)行一次真正的事件處理函數(shù)，而防抖動只是在最后一次事件后才觸發(fā)一次函數(shù)。防抖動與節(jié)流針對一些會頻繁觸發(fā)的事件如scroll、resize，如果正常綁定事件處理函數(shù)的話，有可能在很短的時間內(nèi)多次連續(xù)觸發(fā)事件，十分影響性能。所以我們對于這種事件我們要進行防抖動或...

Yangyang 2019-08-21 17:41 評論0 收藏0