JS函數(shù)防抖動

Ethan815 發(fā)布于2019-08-26 10:26 / 3463人閱讀

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

前言

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

解決方案

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

理解防抖

作用：延遲執(zhí)行，防止間隔時間內連續(xù)調用,減少響應次數(shù)，優(yōu)化性能。
自實現(xiàn)代碼：

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

            // 延遲執(zhí)行函數(shù)
            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();
                }
            }
        }

如果是立即執(zhí)行（immediate: true）

第一次調用，創(chuàng)建一個保護性質的 timer

立即執(zhí)行傳入的 func 并且將返回函數(shù)的執(zhí)行上下文綁定到 func 中

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

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

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

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

如果延遲執(zhí)行（immediate: false）

第一次調用，創(chuàng)建一個 timer

緩存執(zhí)行上下文 this 和 arguments

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

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

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

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

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

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

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

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

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/106168.html

關于js節(jié)流函數(shù)throttle和防抖動debounce

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

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

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

lieeps 2019-08-29 15:12 評論0 收藏0
關于js節(jié)流函數(shù)throttle和防抖動debounce

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

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

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

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

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

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