成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JS函數(shù)防抖動(dòng)

Ethan815 / 3416人閱讀

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

前言

目前在做一個(gè)大型的前端后臺(tái)管理系統(tǒng)，里面有大量的表單校驗(yàn)和輸入框查詢操作。如果每次用戶輸入的瞬間都去響應(yīng)或者檢測(cè)，其實(shí)是不太必要的，因?yàn)橛脩舻妮斎胍话憔哂羞B續(xù)性，所以可以在用戶輸入產(chǎn)生停頓的時(shí)候再去校驗(yàn)或者向服務(wù)器發(fā)送請(qǐng)求。

解決方案

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

理解防抖

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

  /**
   *
   * @param  {function}   func      回調(diào)函數(shù)
   * @param  {number}     wait      表示時(shí)間窗口的間隔
   * @param  {boolean}    immediate 是否立即執(zhí)行 
   *                               
   * @return {function}             返回調(diào)用函數(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）

第一次調(diào)用，創(chuàng)建一個(gè)保護(hù)性質(zhì)的 timer

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

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

如果沒有達(dá)到 wait 時(shí)間再次調(diào)用

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

達(dá)到了 wait 時(shí)間內(nèi)無法連續(xù)調(diào)用的情況，這就是為什么說第一次調(diào)用創(chuàng)建的timer是一個(gè)保護(hù)性質(zhì)的

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

第一次調(diào)用，創(chuàng)建一個(gè) timer

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

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

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

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

如果沒有達(dá)到 wait 時(shí)間再次調(diào)用

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

達(dá)到了在 wait 時(shí)間內(nèi)無法連續(xù)調(diào)用的結(jié)果

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

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

相關(guān)文章

  • 關(guān)于js節(jié)流函數(shù)throttle和防抖動(dòng)debounce

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

    張紅新 評(píng)論0 收藏0

  • 關(guān)于js節(jié)流函數(shù)throttle和防抖動(dòng)debounce

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

    lieeps 評(píng)論0 收藏0

  • 關(guān)于js節(jié)流函數(shù)throttle和防抖動(dòng)debounce

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

    shery 評(píng)論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é)流 針對(duì)一些會(huì)頻繁觸發(fā)的事件如scroll、resize，如果正常綁定事件處理函數(shù)的話，有可能在很短的時(shí)間內(nèi)多次連續(xù)觸發(fā)事件，十分影響性能。所以我們對(duì)于這種事件我們要進(jìn)行防抖動(dòng)或...

    Yangyang 評(píng)論0 收藏0

  • 防抖動(dòng)處理和節(jié)流 小技巧

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

    lscho 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<