JS之節流和防抖

fevin 發布于2019-08-26 17:15 / 2876人閱讀

摘要：節流在指定時間之內，讓函數只觸發一次。防抖對于一定時間段的連續的函數調用，只讓其執行一次。總結以上只是很簡單的寫了一下節流和防抖的原理，在里，實現起來更加復雜，但是背后的原理核心就是上邊代碼寫的。

概述

在平時的開發中，經常會聽到兩個差不多很相近的詞。節流（throttle）和防抖（debounce）。這是兩個類似又有些不同的優化方案。

節流：在指定時間之內，讓函數只觸發一次。
防抖：對于一定時間段的連續的函數調用，只讓其執行一次。

兩個方法在underscore.js中都已經實現了。本文將會重點說明兩個函數的應用場景和背后的原理。

應用場景 節流

throttle在英語里的意思是節流閥，顧名思義，設置一個閥值（制定一個時間），在這個閥值或者時間之內，函數只會執行一次。

舉個例子，我們執行頁面滾動的時候，比如在react里面，可能每次滾動都會觸發一次render，這樣嚴重影響性能，甚至會造成瀏覽器卡死。如果我們設置一個300ms的時間閥，那么在這段時間內，滾動時候只會觸發一次render.

同樣的，當我們拖拽某個元素的時候，會每次判斷mousemove時跟位置相關的信息，每次都會執行相關的計算和判斷，這種情況就和滾動時候一樣，如果設置一個時間閥，那么就可以避免由于大量執行事件計算而造成的性能下降。

防抖

我自己的理解，防抖的意思可以認為是，阻止連續的抖動（所謂的事件觸發），也就是說，我們用防抖來讓那些連續觸發的事件只觸發一次。

比如，當我們對一個文本框進行輸入的時候，在react中，每次都會觸發onChange事件，我們可能在每次事件里發送ajax請求，判斷輸入的用戶名是否曾經注冊過，這種情況下我們使用防抖，可以保證只會在最后一次onChange事件才會觸發ajax請求。

實現原理

節流

節流實現起來很好理解，設置一個bool值，在時間閥之內，根據這個bool來判斷是否執行函數。

function throttle(fn,times = 300){
    let bool = true
    return function(){
        if(!bool){
            return false
        }
        bool = false
        setTimeout(()=>{
            bool = true
            fn.apply(this,arguments)
        },times)
    }
    
}

防抖

防抖實現起來的思路是，用閉包保存執行的函數，多次執行的時候把上一個執行的函數清除掉，然后再次創建一個新的函數。這樣在間隔時間內還有事件觸發的話，不會執行之前的函數，這么一來，函數真正的執行就是最后一次事件觸發。

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

總結

以上只是很簡單的寫了一下節流和防抖的原理，在underscore.js里，實現起來更加復雜，但是背后的原理核心就是上邊代碼寫的。兩者都是在密集調用的過程中靈活使用setTimeout函數來對頻繁觸發的事件進行控制和優化。

云服務器 GPU云服務器 VUE防抖與節流 js函數節流防抖 VUE防抖

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110127.html

js 函數節流和防抖

摘要：函數節流和防抖防抖和節流的作用都是防止函數多次調用。頁面窗口的事件方法節流方法閉包節流防抖一段時間內觸發事件只執行一次。 js 函數節流和防抖防抖和節流的作用都是防止函數多次調用。區別在于，假設一個用戶一直觸發這個函數，且每次觸發函數的間隔小于wait，防抖的情況下只會調用一次，而節流的情況會每隔一定時間（參數wait）調用函數。 throttle 節流節流是將多次執行變成每隔一...

atinosun 2019-08-23 12:25 評論0 收藏0
前端優化 —— 函數的節流和防抖

摘要：文件為函數要傳入的參數返回事件處理函數添加事件監聽節流函數一般用于事件的情況較多，因為這些事件的觸發是連續性的，需要在一個時間間隔內只觸發一次。 showImg(https://segmentfault.com/img/remote/1460000018998747); 閱讀原文前言在前端開發當中我們經常會綁定一些事件觸發的某些程序執行，有時這些事件會連續觸發，如瀏覽器窗口 s...

ralap 2019-08-23 12:18 評論0 收藏0
理解節流和防抖

摘要：所以針對此類事件則需要進行節流，或者防抖動處理。節流判斷是否已空閑，如果在執行中，則直接函數節流二防抖對于一定時間段內的連續的函數調用，只執行一次原理其實就是一個定時器，當我們觸發一個事件時，讓這個事件延遲一會在執行。在瀏覽器dom事件里面，一些事件會隨著用戶的操作不間斷的觸發，比如：為一個元素綁定拖拽事件，為頁面綁定resize事件（重新調整瀏覽器窗口大小），頁面滾動。如果dom操...

zebrayoung 2019-08-22 16:48 評論0 收藏0
關于js節流函數throttle和防抖動debounce

摘要：主要實現在于通過異步操作的事件間隔，對于前后兩次調用方法打時間進行比較，用清空定時器的操作實現多余調用操作的舍棄。廢話不多說，直奔主題。什么是throttle和debounce？這兩個方法的主要目的多是用于性能優化。最常見的應用嘗盡就是在通過監聽resize、scroll、mouseover等事件時候的性能消耗。拿scroll來說，沒有處理時滑動一次滾動條scroll事件會觸發多...

張紅新 2019-08-22 16:45 評論0 收藏0
關于js節流函數throttle和防抖動debounce

摘要：主要實現在于通過異步操作的事件間隔，對于前后兩次調用方法打時間進行比較，用清空定時器的操作實現多余調用操作的舍棄。廢話不多說，直奔主題。什么是throttle和debounce？這兩個方法的主要目的多是用于性能優化。最常見的應用嘗盡就是在通過監聽resize、scroll、mouseover等事件時候的性能消耗。拿scroll來說，沒有處理時滑動一次滾動條scroll事件會觸發多...

lieeps 2019-08-29 15:12 評論0 收藏0