JS節流和防抖

来源:https://www.cnblogs.com/gaoht/archive/2018/12/03/10057225.html
-Advertisement-
Play Games

事件的觸發權很多時候都屬於用戶,有些情況下會產生問題: 向後臺發送數據,用戶頻繁觸發,對伺服器造成壓力 一些瀏覽器事件:window.onresize、window.mousemove等,觸發的頻率非常高,會造成瀏覽器性能問題 如果你碰到這些問題,那就需要用到函數節流和防抖了。 一、函數節流(thr ...


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

  • 向後臺發送數據,用戶頻繁觸發,對伺服器造成壓力
  • 一些瀏覽器事件:window.onresize、window.mousemove等,觸發的頻率非常高,會造成瀏覽器性能問題

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

一、函數節流(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.如何實現

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

<button id='btn'>按鈕</button>
<script type="text/javascript">
function debounce(fn, delay) {
    // 記錄上一次的延時器
   var timer = null;
    return function() {
    // 清除上一次延時器
    clearTimeout(timer)
    timer = setTimeout(function() {
            fn.apply(this)
        }, delay)
    }
}
document.getElementById('btn').onclick = debounce(function() {
    console.log('點擊事件被觸發' + Date.now())
}, 1000)
</script>

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

2.函數防抖的應用場景

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

  • 每次 resize/scroll 觸發統計事件
  • 文本輸入的驗證(連續輸入文字後發送 AJAX 請求進行驗證,驗證一次就好)

三、總結

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

參考文章

函數節流與函數防抖

JavaScript 函數節流和函數去抖應用場景辨析

函數節流、函數防抖實現原理分析


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 內置類型 JS 中分為七種內置類型,七種內置類型又分為兩大類型:基本類型和對象(Object)。 基本類型有六種: ,`undefined boolean number string symbol`。 其中 JS 的數字類型是浮點類型的,沒有整型。並且浮點類型基於 IEEE 754標準實現,在使用中 ...
  • 參考資料:CSDN-真實的上傳進度條 ...
  • 聲明 本系列文章內容全部梳理自以下幾個來源: 《JavaScript權威指南》 "MDN web docs" "Github:smyhvae/web" "Github:goddyZhao/Translation/JavaScript" 作為一個前端小白,入門跟著這幾個來源學習,感謝作者的分享,在其基 ...
  • React Router是一個基於React之上的強大路由庫,可以讓你嚮應用中快速的添加視圖和數據流,同時保持頁面與URL間的同步。 1.安裝: 2.問題說明: 剛開始的時候由於沒有註意到版本信息,導致出現了一些錯誤,現在記錄如下: 這是我package.js中的版本信息, 說明1:react-ro ...
  • "前言" 繼上一次webpack的基礎配置分享之後,本次將分享一些工作中項目常用的配置插件、也會包含一些自己瞭解過覺得不錯的插件,如有分析不到位的,歡迎糾錯, 嗯,這些東西文檔都有,大佬可繞過 。 Wepack4之後廢棄了很多的插件,這裡只會講解webpack4還支持的( ),已經廢棄的將不再闡述。 ...
  • 初來乍到,算是一個博客園的新人,受了園裡許多前輩的啟發正在一點點定製自己的小空間。 也希望我的文章能夠成為大家DIY的啟發,就算是拋磚引玉了。效果可以直接在我的博客中看到,所以不另外貼圖了。 引入js文件與css文件 引入js文件需要先申請js許可權,語言誠懇一點幾個小時(?)就可以拿到許可權了。 引入 ...
  • 上一篇寫的是左右寬高固定,中間自適應,根據上一篇的內容,總結了下上下寬高固定,中間自適應的幾種佈局方式,話不多說,直接上代碼。 下邊圖片是代碼運行的效果圖,大家可以運行代碼試試看。 自己總結的,有不對的地方歡迎大家指正! ...
  • 最近在開發一個網站時,有個需要是 如果有新預警信息要在網頁中播放提示音。頁面打開會請求是否有新信息,有則播放提示音。在Chrome的最新瀏覽器中,播放會報錯,控制台顯示Uncaught (in promise) DOMException: play() failed because the user ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...