節(jié)流閥和去抖動(dòng)的基本實(shí)現(xiàn)

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

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

節(jié)流閥throttle

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

function throttle (fn, delay) {
  // 利用閉包變量時(shí)效性
  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 // 不需要時(shí)釋放內(nèi)存
*/

去抖動(dòng)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.hztianpu.com/yun/103454.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

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