国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

函數節流和防抖

huaixiaoz / 916人閱讀

摘要：當第二次調用該函數時，它會清除前一次的定時器并設置另一個。然而，如果前一個定時器尚未執行，其實就是將其替換為一個新的定時器，然后延遲一定時間再執行。參考文章函數節流與函數防抖函數節流和函數去抖應用場景辨析函數節流函數防抖實現原理分析

前言

事件的觸發權很多時候都屬于用戶，有些情況下會產生問題：

向后臺發送數據，用戶頻繁觸發，對服務器造成壓力

一些瀏覽器事件:window.onresize、window.mousemove等，觸發的頻率非常高，會造成瀏覽器性能問題

如果你碰到這些問題，那就需要用到函數節流和防抖了。

本文首發地址為GitHub博客,寫文章不易，請多多支持與關注！

一、函數節流(throttle)

函數節流：一個函數執行一次后，只有大于設定的執行周期后才會執行第二次。
有個需要頻繁觸發函數，出于優化性能角度，在規定時間內，只讓函數觸發的第一次生效，后面不生效。

1.如何實現

其原理是用時間戳來判斷是否已到回調該執行時間，記錄上次執行的時間戳，然后每次觸發 scroll 事件執行回調，回調中判斷當前時間戳距離上次執行時間戳的間隔是否已經到達 規定時間段，如果是，則執行，并更新上次執行的時間戳，如此循環；

 html,
 body {
    height: 500%; // 讓其出現滾動條
}
function throttle(fn, delay) {
    // 記錄上一次函數觸發的時間
    var lastTime = 0;
    return function() {
        // 記錄當前函數觸發的時間
        var nowTime = Date.now();
        if (nowTime - lastTime > delay) {
        // 修正this指向問題
            fn.call(this);
        // 同步時間
          lastTime = nowTime;
        }
    }
}
document.onscroll = throttle(function() { console.log("scroll事件被觸發了" + Date.now()) }, 200)

上例中用到了閉包的特性--可以使變量lastTime的值長期保存在內存中。

2.函數節流的應用場景

需要間隔一定時間觸發回調來控制函數調用頻率：

DOM 元素的拖拽功能實現（mousemove）

搜索聯想（keyup）

計算鼠標移動的距離（mousemove）

Canvas 模擬畫板功能（mousemove）

射擊游戲的 mousedown/keydown 事件（單位時間只能發射一顆子彈）

監聽滾動事件判斷是否到頁面底部自動加載更多：給 scroll 加了 debounce 后，只有用戶停止滾動后，才會判斷是否到了頁面底部；如果是 throttle 的話，只要頁面滾動就會間隔一段時間判斷一次

二、函數防抖(debounce)

防抖函數：一個需要頻繁觸發的函數，在規定時間內，只讓最后一次生效，前面的不生效。

1.如何實現

其原理就第一次調用函數，創建一個定時器，在指定的時間間隔之后運行代碼。當第二次調用該函數時，它會清除前一次的定時器并設置另一個。如果前一個定時器已經執行過了，這個操作就沒有任何意義。然而，如果前一個定時器尚未執行，其實就是將其替換為一個新的定時器，然后延遲一定時間再執行。

上例中也用到了閉包的特性--可以使變量timer的值長期保存在內存中。

2.函數防抖的應用場景

對于連續的事件響應我們只需要執行一次回調：

每次 resize/scroll 觸發統計事件

文本輸入的驗證（連續輸入文字后發送 AJAX 請求進行驗證，驗證一次就好）

三、總結

函數節流和函數去抖的核心其實就是限制某一個方法被頻繁觸發，而一個方法之所以會被頻繁觸發，大多數情況下是因為 DOM 事件的監聽回調，而這也是函數節流以及防抖多數情況下的應用場景。

參考文章 函數節流與函數防抖 JavaScript 函數節流和函數去抖應用場景辨析 函數節流、函數防抖實現原理分析

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

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

相關文章

  • JS之節流和防抖

    摘要：節流在指定時間之內，讓函數只觸發一次。防抖對于一定時間段的連續的函數調用，只讓其執行一次。總結以上只是很簡單的寫了一下節流和防抖的原理，在里，實現起來更加復雜，但是背后的原理核心就是上邊代碼寫的。 概述 在平時的開發中，經常會聽到兩個差不多很相近的詞。節流（throttle）和防抖（debounce）。這是兩個類似又有些不同的優化方案。 節流：在指定時間之內，讓函數只觸發一次。 防...

    fevin 評論0 收藏0

  • 函數節流和防抖

    摘要：當第二次調用該函數時，它會清除前一次的定時器并設置另一個。然而，如果前一個定時器尚未執行，其實就是將其替換為一個新的定時器，然后延遲一定時間再執行。參考文章函數節流與函數防抖函數節流和函數去抖應用場景辨析函數節流函數防抖實現原理分析 前言 事件的觸發權很多時候都屬于用戶，有些情況下會產生問題： 向后臺發送數據，用戶頻繁觸發，對服務器造成壓力 一些瀏覽器事件:window.onresi...

    didikee 評論0 收藏0

  • 函數節流和防抖

    摘要：當第二次調用該函數時，它會清除前一次的定時器并設置另一個。然而，如果前一個定時器尚未執行，其實就是將其替換為一個新的定時器，然后延遲一定時間再執行。參考文章函數節流與函數防抖函數節流和函數去抖應用場景辨析函數節流函數防抖實現原理分析 前言 事件的觸發權很多時候都屬于用戶，有些情況下會產生問題： 向后臺發送數據，用戶頻繁觸發，對服務器造成壓力 一些瀏覽器事件:window.onresi...

    CHENGKANG 評論0 收藏0

  • JavaScript 函數節流 throttle 和防抖 debounce

    摘要：今天和別人聊到函數的節流和防抖，發現自己對這兩個的區別很是模糊，遂小小實踐一下，在此記錄，希望對需要的人有所幫助。防抖實現順利，但是兩個節流方法的執行結果存在差異。 今天和別人聊到JavaScript函數的節流和防抖，發現自己對這兩個的區別很是模糊，遂小小實踐一下，在此記錄，希望對需要的人有所幫助。 節流 - 頻繁操作，間隔一定時間去做一件事 舉例說明：假定時間間隔為 500ms，頻繁...

    mmy123456 評論0 收藏0

  • 前端優化 —— 函數的節流和防抖

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

    ralap 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<