防抖

XiNGRZ 發(fā)布于2019-08-23 14:52 / 1540人閱讀

摘要：防抖的中心思想在于我會等你到底。這次的司機比較有耐心。第一個乘客上車后，司機開始計時比如說十分鐘。而認(rèn)為，最后一個人說了算，會為每一個新乘客設(shè)定新的定時器。

防抖的中心思想在于：我會等你到底。在某段時間內(nèi)，不管你觸發(fā)了多少次回調(diào)，我都只認(rèn)最后一次。

繼續(xù)講司機開車的故事。這次的司機比較有耐心。第一個乘客上車后，司機開始計時（比如說十分鐘）。十分鐘之內(nèi)，如果又上來了一個乘客，司機會把計時器清零，重新開始等另一個十分鐘（延遲了等待）。直到有這么一位乘客，從他上車開始，后續(xù)十分鐘都沒有新乘客上車，司機會認(rèn)為確實沒有人需要搭這趟車了，才會把車開走。

我們對比 throttle 來理解 debounce：在throttle的邏輯里，“第一個人說了算”，它只為第一個乘客計時，時間到了就執(zhí)行回調(diào)。而 debounce 認(rèn)為，“最后一個人說了算”，debounce 會為每一個新乘客設(shè)定新的定時器。

我們基于上面的理解，一起來寫一個 debounce：

// fn是我們要包裝的回調(diào)函數(shù)事件，delay每次等待都執(zhí)行時間
function debounce(fn, delay) {

// 定時器；
let timer = null;

return function() {
    // 保存上下文的this
    let context = this
    // 保存?zhèn)魅氲膮?shù)
    let args = arguments;
    // 每次調(diào)用前都清空定時器
    if (timer) {
        clearTimeout(timer)
    }
   // 去設(shè)立一個新的定時器
   timer = setTimeout (function() {
        fn.apply(context, args);    
   }, delay)
}

}
// 用throttle來包裝scroll的回調(diào)
let better_scroll = debounce(() => {console.log("觸發(fā)了滾動事件"), 1000});
document.addEventListener("scroll", better_scroll);

GPU云服務(wù)器云服務(wù)器防抖 VUE防抖 VUE防抖與節(jié)流

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

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

相關(guān)文章

防抖 - 理解，實踐與實現(xiàn)

摘要：本文主要討論防抖，鏡像文章節(jié)流理解，實踐與實現(xiàn)。分開討論防抖和節(jié)流，主要是為了讓一些還不太了解防抖節(jié)流的讀者能夠有針對性地，逐一掌握它們。防抖是什么結(jié)合上方案例，防抖可以理解為多次觸發(fā)事件后，事件處理函數(shù)只執(zhí)行一次。為了完整閱讀體驗，歡迎移步到我的博客原文。防抖（去抖），以及節(jié)流（分流）在日常開發(fā)中可能用的不多，但在特定場景，卻十分有用。本文主要討論防抖，鏡像文章：節(jié)流 - 理解，...

yangrd 2019-08-26 12:20 評論0 收藏0
詳談js防抖和節(jié)流

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

shevy 2019-08-23 13:54 評論0 收藏0
徹底弄懂函數(shù)防抖和函數(shù)節(jié)流

摘要：若時間差大于間隔時間，則立刻執(zhí)行一次函數(shù)。不同點函數(shù)防抖，在一段連續(xù)操作結(jié)束后，處理回調(diào)，利用和實現(xiàn)。函數(shù)防抖關(guān)注一定時間連續(xù)觸發(fā)的事件只在最后執(zhí)行一次，而函數(shù)節(jié)流側(cè)重于一段時間內(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進階篇2---函數(shù)防抖（debounce）

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

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

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

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

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

趙連江 2019-08-20 17:03 評論0 收藏0