JS函數防抖動

Ethan815 發布于2019-08-26 10:26 / 3410人閱讀

摘要：解決方案采用的解決方案是直接使用防抖函數。詳情可以參照中文文檔理解防抖作用延遲執行，防止間隔時間內連續調用減少響應次數，優化性能。

前言

目前在做一個大型的前端后臺管理系統，里面有大量的表單校驗和輸入框查詢操作。如果每次用戶輸入的瞬間都去響應或者檢測，其實是不太必要的，因為用戶的輸入一般具有連續性，所以可以在用戶輸入產生停頓的時候再去校驗或者向服務器發送請求。

解決方案

采用的解決方案是直接使用 lodash 防抖函數 _.debouce。
詳情可以參照： lodash 中文文檔

理解防抖

作用：延遲執行，防止間隔時間內連續調用,減少響應次數，優化性能。
自實現代碼：

  /**
   *
   * @param  {function}   func      回調函數
   * @param  {number}     wait      表示時間窗口的間隔
   * @param  {boolean}    immediate 是否立即執行 
   *                               
   * @return {function}             返回調用函數
   */
        var debounce = (func, wait = 100, immediate = false) => {
            let timer, ctx, args;

            // 延遲執行函數
            const later = () => setTimeout(() => {
                timer = null;
                if (!immediate) {
                    func.call(ctx, ...args);
                    ctx = args = null;
                }
            }, wait);

            return function() {
                if (!timer) {
                    timer = later();
                    if (immediate) {
                        func.call(this, ...arguments);
                    } else {
                        ctx = this;
                        args = arguments;
                    }
                } else {
                    clearTimeout(timer);
                    timer = later();
                }
            }
        }

如果是立即執行（immediate: true）

第一次調用，創建一個保護性質的 timer

立即執行傳入的 func 并且將返回函數的執行上下文綁定到 func 中

如果達到 wait 時間執行定時器函數，timer 置為 null，等待一個新的調用過程

如果沒有達到 wait 時間再次調用

此時 timer 仍然存在，于是會調用 clearTimeout 清除原有定時器，再創建一個新的 timer

達到了 wait 時間內無法連續調用的情況，這就是為什么說第一次調用創建的timer是一個保護性質的

如果延遲執行（immediate: false）

第一次調用，創建一個 timer

緩存執行上下文 this 和 arguments

由于 JS 中的異步機制，就算 wait 值為 0，timer 中的函數也會晚于上一步執行

如果達到 wait 事件執行定時器函數，拿到的是正確的 this 和 args，而非 undefined

執行完畢后清除當前緩存執行上下文和參數，等待一個新的調用過程

如果沒有達到 wait 時間再次調用

此時 timer 仍然存在，于是會調用 clearTimeout 清除原有定時器，再創建一個新的 timer

達到了在 wait 時間內無法連續調用的結果

云服務器 GPU云服務器防抖動 webrtc防抖動 webrtc防抖動策略 js里函數沒有函數體

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

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

關于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
關于js節流函數throttle和防抖動debounce

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

shery 2019-08-02 10:18 評論0 收藏0
防抖動與節流

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

Yangyang 2019-08-21 17:41 評論0 收藏0
防抖動處理和節流小技巧

摘要：簡單的防抖動處理，一秒內點擊一次向服務器請求數據點擊按鈕向后臺請求數據優化點另外一些防抖動的小技巧，請參考封裝好的簡單防抖動函數防抖動函數要執行的函數，間隔毫秒數調用現成的工具庫防抖動節流 1. 簡單的防抖動處理，一秒內點擊一次 var timer = null; $(.coupon).click(function(){ if (timer) { return; } ...

lscho 2019-08-22 18:02 評論0 收藏0