JS手寫代碼篇---手寫節流函數

8、節流函數

什么是節流函數?

指規定一個單位時間,在這個單位時間內,只能有一次觸發事件的回調函數執行,如果在同一個單位時間內某事件被觸發多次,只有一次能生效。

與防抖函數有什么區別?

防抖函數是延遲函數執行,直到事件停止觸發一段時間后再執行,適用于需要等待事件停止觸發后再執行的場景。而節流函數則是控制函數在指定時間內只執行一次,適用于需要控制執行頻率的場景。

   function throttle(fn, wait) {let preTime = new Date();return function () {let context = this;let args = arguments;let curTime = new Date();let during = curTime - preTime;if (during > wait) {// 當時間大于等待時間的時候// 執行函數fn.apply(context, args);// 更新 preTimepreTime = curTime;}};}

() => {
fn.apply(context , args);//保證函數的上下文和參數與原始調用時一致
} , wait)
}
}


## 8、節流函數**什么是節流函數?**指規定一個單位時間,在這個單位時間內,只能有一次觸發事件的回調函數執行,如果在同一個單位時間內某事件被觸發多次,只有一次能生效。**與防抖函數有什么區別?**防抖函數是延遲函數執行,直到事件停止觸發一段時間后再執行,適用于需要等待事件停止觸發后再執行的場景。而節流函數則是控制函數在指定時間內只執行一次,適用于需要控制執行頻率的場景。

function throttle(fn, wait) {
let preTime = new Date();
return function () {
let context = this;
let args = arguments;
let curTime = new Date();
let during = curTime - preTime;
if (during > wait) {
// 當時間大于等待時間的時候
// 執行函數
fn.apply(context, args);
// 更新 preTime
preTime = curTime;
}
};
}


本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/pingmian/83009.shtml
繁體地址,請注明出處:http://hk.pswp.cn/pingmian/83009.shtml
英文地址,請注明出處:http://en.pswp.cn/pingmian/83009.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

2025年05月30日Github流行趨勢

項目名稱:agenticSeek 項目地址url:https://github.com/Fosowl/agenticSeek項目語言:Python歷史star數:13040今日star數:1864項目維護者:Fosowl, steveh8758, klimentij, ganeshnikhil, apps/copilot-pull-…

node_modules包下載不下來

如果項目里面的package-lock.json有resolved ,就指向了包的下載來源,如果這個網址掛了,那npm i 就會一直卡著。而且,在終端去修改 npm的鏡像是沒有用的 解決辦法是:把項目里面的 lock文件 .npmrc都刪了 然后重新下載就可以了

OramaCore 是您 AI 項目、答案引擎、副駕駛和搜索所需的 AI 運行時。它包括一個成熟的全文搜索引擎、矢量數據庫、LLM界面和更多實用程序

一、軟件介紹 文末提供程序和源碼下載 OramaCore 是您的項目、答案引擎、副駕駛和搜索所需的 AI 運行時。 它包括一個成熟的全文搜索引擎、矢量數據庫、LLM具有行動計劃和推理功能的接口、用于根據數據編寫和運行您自己的自定義代理的 JavaScript 運行時,以及更多…

小白成長之路-計算機網絡(四)

文章目錄 前言一、網絡連接查看1.netstat2.ss3.bond綁定3.1準備好這三個文件3.2添加bond配置文件3.3關閉網絡圖形化服務3.4重啟 4.Linux下的抓包工具Wireshark 5、web壓力測試工具6、路由追蹤命令 二、[練習題](https://blog.csdn.net/m0_70730767/article/details/148262716?…

CppCon 2014 學習:Lock-Free Programming

你這段文字講的是“為什么要使用無鎖(Lock-Free)代碼”,我幫你總結并解釋一下: 為什么選擇無鎖代碼? 并發性和可擴展性(Concurrency and scalability) 無鎖算法允許多個線程同時操作共享數據&a…

Proteus尋找元器件(常見)

匯總: 1 主控芯片 STM32系列(32位) AT89C51(51系列) 2顯示模塊 OLED 3 按鍵 Button 4 電阻電容 Res(電阻) Cap(電容) 5 驅動模塊 L298N(電機驅動芯片&am…

vue+threeJs 繪制3D圓形

嗨,我是小路。今天主要和大家分享的主題是“vuethreeJs 繪制圓形”。 今天找到一個用three.js繪制圖形的項目,主要是用來繪制各種形狀。 項目案例示意圖 1.THREE.ShapeGeometry 定義:是 Three.js 中用于從 2D 路徑形狀&#xff08…

macOS燒錄stm32程序初步成功

完整總結:STM32H7 項目編譯與燒錄流程(macOS OpenOCD/GDB) 1?? 編譯工程 在項目目錄下執行 make,生成 ELF 文件(如 Blink.elf): cd /Users/code/Stm32code/Blink/build make clean # 可選…

正則表達式的修飾符

修飾符 修飾符不寫在正則表達式里,標記位于表達式之外 /正則表達式/修飾符gglobal - 全局匹配 查找所有的匹配項。 i i (ignore case) - 忽略大小寫 示例:/abc/i 可以匹配 "abc", "Abc", "ABC" 等

JS浮點數精度問題

在JavaScript開發中,浮點數精度問題是一個常見的陷阱。本文將深入探討JavaScript中浮點數精度問題的原因、影響以及解決方案。 一、浮點數精度常見問題 (一)加法運算 console.log(0.1 0.2); // 0.30000000000000004 console.log(0.7 0.1…

本地Markdown開源知識庫選型指南

本地Markdown開源知識庫選型指南 以下是幾款優秀的本地Markdown開源知識庫解決方案,適合不同需求場景: 1. Obsidian (非完全開源但免費) 特點:基于Markdown的本地優先知識管理,豐富的插件生態優勢:雙向鏈接、圖形視…

蘇州SAP代理公司排名:工業園區企業推薦的服務商

目錄 一、SAP實施商選擇標準體系 1、行業經驗維度 2、實施方法論維度 3、資質認證維度 4、團隊實力維度 二、SAP蘇州實施商工博科技 1、SAP雙重認證,高等院校支持 2、以SAP ERP為核心,助力企業數字化轉型 三、蘇州使用SAP的企業 蘇州是中國工業…

springboot項目下面的單元測試注入的RedisConnectionFactory類redisConnectionFactory值為什么為空呢?

你遇到的問題是: RedisConnectionFactory redisConnectionFactory 在單元測試中為 null 這是 Spring Boot 單元測試中非常常見的問題,根本原因是你的測試類沒有啟用 Spring 容器上下文,導致 Resource 注解無法注入 Bean。 ? 正確做法&…

光電學、計算機科學及算法國際會議(OCSA 2025)征稿啟事?

在科技浪潮奔涌向前的當下,光電學、計算機科學及算法領域的創新成果不斷涌現,持續重塑著各個行業的格局,深刻影響著我們的生活。為了進一步促進該領域的學術交流與合作,匯聚全球智慧,光電學、計算機科學及算法國際會議…

小樣本分類新突破:QPT技術詳解

問題導向式提示調優(QPT) 這篇論文主要講了一個針對小樣本(數據量少)文本分類問題的新方法,叫問題導向式提示調優(QPT)。 核心思路是讓預訓練語言模型(比如BERT的升級版RoBERTa)在少量標注數據下,通過設計特定的“提問式模板”和“標簽詞擴展技術”來提升分類效果。…

Oracle EBS 12.1 處理ISG 發布的wsdl 被請求時遇到500錯誤

Oracle 12.1.3 通過ISG 發布了一個服務,該服務在被頻繁調用的時候,出現500 錯誤,臨時解決方案是可以通過重啟oafm組件解決,但是需要定位原因。 排查日志路徑 $INST_TOP/logs/ora/10.1.3/opmn/default_group~oafm~default_group~1…

shadcn/ui

文章目錄 前言? 核心特點📦 支持組件(常用)🚀 安裝使用(框架支持)初始化(Next.js 項目為例)添加一個組件 🧠 對比其他組件庫📘 官方資源? 總結? 功能特性&…

力扣每日一題——找到離給定兩個節點最近的節點

目錄 題目鏈接:2359. 找到離給定兩個節點最近的節點 - 力扣(LeetCode) 題目描述 解法一:雙指針路徑交匯法? 基本思路 關鍵步驟 為什么這樣可行呢我請問了? 舉個例子 特殊情況 Java寫法: C寫法&a…

Termux可用中間人網絡測試工具Xerosploit

Termux可用中間人網絡測試工具Xerosploit。 Xerosploit 是一款基于 MITM 的本地網絡滲透測試工具包。 食用方法: git clone https://github.com/LionSec/xerosploit cd xerosploit sudo python3 install.py 運行: sudo xerosploit 使用備注&#xff1…

vue3 導出excel

需求&#xff1a;導出自帶格式的excel表格 1.自定義二維數組格式 導出 全部代碼&#xff1a; <el-button click"exportExcel">導出</el-button> const exportExcel () > {const data [[商品, 單價, 數量, 總價],[A, 100, 1.55, { t: n, f: B2*C2…