JS:实现完整的防抖和节流方法，且触发时必须等待执行完成才会继续触发

原创已于 2025-04-19 10:52:07 修改 · 211 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

于 2024-08-16 18:33:56 首次发布

已转移至：语雀文档

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

「已注销」

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

js防抖节流(首次点击处理)

珊妹的博客

06-15

624

之前一直不太理解apply的作用，applay的使用应该是为了保证this指向唯一，指向当前闭包状态吧。理解:设置触发的时间间隔为n，在时间n内连续触发只有最后一次会执行。理解:设置触发时间间隔为n，连续触发事件，每隔n会触发一次。第二种时间戳(感觉这个不错，但最后一次不执行)应用：字典联想，按钮连续点击，页面缩放。

JavaScript：闭包、防抖与节流

dangfulin的博客

10-19

1279

一，闭包 1，什么是闭包闭包是指一个函数和其周围的词法环境(lexicalenvironment)的组合。换句话说，闭包允许一个函数访问并操作函数外部的变量。闭包的核心特性: 函数内部可以访问外部函数的变量即使外部函数已经返回，内部函数仍然可以访问这些变量闭包可以保护变量不被垃圾回收机制回收一个简单的例子： functionouterFunction(x){ lety=10 functioninnerFunction(){ //内部函数in

参与评论您还未登录，请先登录后发表或查看评论

JavaScript：节流与防抖

m0_65029152的博客

07-20

6247

本文主要记录JavaScript中，防抖和节流的相关内容和技术应用；

JS防抖和节流

W2004828的博客

10-17

853

摘要：本文介绍了防抖和节流两种优化高频事件触发的技术。防抖通过延迟执行，确保函数只在事件停止触发后执行（如输入框搜索）；节流则限制函数在一定时间间隔内只执行一次（如滚动事件）。两种方法都使用了闭包和定时器技术，能有效减少冗余执行，提升性能。文章详细说明了实现原理和代码示例，并推荐了lodash库的现成解决方案。适用于表单验证、窗口调整、滚动监听等场景，能显著改善用户体验。

JavaScript 防抖和节流的实现

01-23

4312

一、防抖 1. 认识防抖防抖：在第一次触发事件时，不立即执行函数，而是给出一个限定值，比如200ms，然后：如果在200ms内没有再次触发事件，那么执行函数如果在200ms内再次触发函数，那么当前的计时取消，重新开始计时应用场景：输入框中频繁的输入内容，搜索或者提交信息频繁的点击按钮，触发某个事件监听浏览器滚定事件，完成某些特定操作用户缩放浏览器的resize 事件效果：如果短时间内大量触发同一件事，只会执行一次函数。 2.防抖函数的实现防抖函数的核心思路如下：当触发一个函数

JS | JavaScript函数防抖和节流全解析

青春木鱼的博客

09-10

3130

防抖和节流本质上是优化高频率执行代码的一种手段，如：浏览器的 resize、scroll、keypress、mousemove 等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能。为了优化体验，需要对这类事件进行调用次数的限制，对此我们就可以采用防抖（debounce）和节流（throttle）的方式来减少调用频率。节流——n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效。防抖——n 秒后再执行该事件，若在 n 秒内被重复触发，则重新计时.........

js防抖和节流

黎小小的博客

10-16

889

防抖：在n秒内，多次触发，只执行最后一次节流：事件多次触发，每间隔n秒执行一次定时器方式实现防抖和节流时区别：（清除定时器时机不同）注意如果函数有参数，是在返回函数中获取上下文this和参数，并通过fn.apply(context,args) 方式进行传递。

JavaScript实现防抖和节流

weixin_51422386的博客

11-24

2560

JavaScript实现防抖和节流

深入理解防抖和节流：应用场景及实现方式详解

最新发布

weixin_53415999的博客

01-04

145

单文件组件(Vue 单文件组件(又名vue文件，缩写为 SFC)是一种特殊的文件格式，它允许将 Vue 组件的模板、逻辑与样式封装在单个文件中。单文件组件Vue 单文件组件(又名vue 文件，缩写为 SFC)是一种特殊的文件格式，它允许将 Vue 组件的模板、逻辑与样式封装在单个文件中。

微前端系列：核心概念、价值与应用场景

李刚的学习专栏

12-30

657

微前端是一种将大型Web应用拆分为多个独立子应用的技术架构，核心思想是"分而治之"。它允许不同团队使用不同技术栈（如Vue、React）独立开发、测试和部署子应用，通过主应用进行整合，为用户提供统一体验。微前端主要解决团队协作阻塞、技术栈锁定、系统升级困难等问题，适用于大型中后台系统、多团队协作项目和遗留系统重构等场景。其核心能力包括子应用的动态加载/卸载、独立运行隔离、路由状态保持以及应用间通信机制。微前端通过JS/CSS隔离、沙箱技术等手段确保系统稳定性，同时支持渐进式重构，是复杂前端系统的有效架构方案

零基础搭建完成完整的前后端分离项目的准备工作

2401_87199769的博客

12-30

731

搭建完成一个完整的项目需要准备哪些东西？下面就根据我自己的项目经历，分享如何从 0 开始，搭建一个完整的前后端分离项目。既然是一个前后端分离项目，我们就需知道前端是什么？后端是什么？前后端如何协作？，全称，是软件开发中负责的部分，简单来说就是用户打开网站、App 时能看到、能点击、能操作的所有内容。，全称，是软件开发中负责的部分，相当于整个软件的 “幕后大脑”，支撑着前端的所有交互功能正常运转。

前端让我明显感受到了信息闭塞的恐怖......

yydsdaydayup的博客

01-04

442

摘要：前端面试的核心不是死记硬背API和框架原理，而是解决实际问题的能力。许多求职者陷入"背八股文"的误区，但当面对"低版本安卓适配"、"多终端组件库设计"等场景问题时却束手无策。本文整理了大量企业高频考察的实战面试题（如批量请求优化、微前端隔离方案、大文件上传等），涵盖技术实现、架构设计、性能优化等维度，帮助开发者突破信息闭塞，掌握真正的核心竞争力。这些题目反映了行业真实需求，吃透这些解决方案才能在面试中展现价值。

前端 HTML 入门（标签）

0.0的博客

12-31

597

HTML（HyperText Markup Language，超文本标记语言）是构建网页的基础，它不是编程语言，而是标记语言，通过一系列标签描述网页的结构和内容。

＜ Vue3开发核心难点解析：从踩坑到优雅解决＞

一个平平无奇的技术宅

01-04

872

大家好，我是小温～最近在几个Vue3+TypeScript项目中摸爬滚打，从最初对`Composition API`的手足无措，到现在能从容应对各类响应式陷阱。今天就来梳理下Vue3开发中最容易遇到的4个核心难点，结合实战场景给出具体解析和解决方案，帮大家少走弯路！

继续完善设计：添加节流/防抖，防止短时间内多次触发时，重复向后端接口发起请求

10-21

<think>我们正在讨论如何在前端设计中添加节抖（debounce）和节流（throttle）功能来防止重复调用后端接口。节抖（debounce）: 在事件被触发后，等待一段时间再执行回调。如果在这段时间内事件又被触发，则重新计时。适用于输入框搜索建议（等用户输入停止后再请求）。节流（throttle）: 在一段时间内，只允许事件回调执行一次。即使在这段时间内事件被多次触发，也只执行一次。适用于滚动事件、窗口调整等。实现方式： 1. 手动实现节抖和节流函数。 2. 使用第三方库（如lodash）中提供的函数。我将分别给出节抖和节流的手动实现，并说明如何应用到事件处理上。节抖函数实现（debounce）： function debounce(func, wait) { let timeout; return function() { const context = this; const args = arguments; clearTimeout(timeout); timeout = setTimeout(() => { func.apply(context, args); }, wait); }; } 节流函数实现（throttle）： function throttle(func, wait) { let lastTime = 0; return function() { const context = this; const args = arguments; const now = Date.now(); if (now - lastTime >= wait) { func.apply(context, args); lastTime = now; } }; } 或者使用定时器方式实现节流（另一种风格）： function throttle(func, wait) { let timeout; return function() { const context = this; const args = arguments; if (!timeout) { timeout = setTimeout(() => { timeout = null; func.apply(context, args); }, wait); } }; } 应用场景举例： - 防抖：搜索框输入，当用户连续输入时，只在输入完成后才发起请求。 - 节流：页面滚动时加载更多数据，避免频繁触发。在项目中的应用步骤： 1. 确定需要限制的事件（如输入框的onChange，按钮的onClick，窗口的onScroll等）。 2. 根据需求选择防抖或节流。 3. 使用上述函数包装事件处理函数。示例：在React中为一个输入框添加防抖 import React from 'react'; class SearchInput extends React.Component { constructor(props) { super(props); this.state = { query: '' }; // 创建防抖函数，延迟500毫秒执行 this.handleSearch = debounce(this.handleSearch, 500); } handleChange = (e) => { const query = e.target.value; this.setState({ query }); // 调用防抖包装后的函数 this.handleSearch(query); } handleSearch = (query) => { // 实际发起请求的方法 fetch(`/api/search?q=${query}`) .then(response => response.json()) .then(data => { // 处理数据 }); } render() { return ( <input type="text" value={this.state.query} onChange={this.handleChange} /> ); } } 注意：在React函数组件中，使用useCallback和useRef来避免重复创建防抖/节流函数。函数组件示例（使用hooks）： import React, { useState, useCallback } from 'react'; import { debounce } from 'lodash'; // 或者使用自己实现的debounce function SearchInput() { const [query, setQuery] = useState(''); // 使用useCallback缓存防抖函数，避免每次渲染都重新创建 const handleSearch = useCallback(debounce((query) => { // 发起请求 fetch(`/api/search?q=${query}`) .then(response => response.json()) .then(data => { // 处理数据 }); }, 500), []); // 依赖数组为空，表示只创建一次 const handleChange = (e) => { const query = e.target.value; setQuery(query); handleSearch(query); }; return ( <input type="text" value={query} onChange={handleChange} /> ); } 但是注意：上面的函数组件示例中，如果使用自己实现的debounce并且使用useCallback，需要确保debounce函数被正确缓存。另外，当组件卸载时，应该取消防抖函数中未执行的调用，以避免在已卸载组件上执行状态更新（内存泄漏）。改进：在useEffect中返回一个清理函数来取消防抖。对于自己实现的防抖函数，可以修改debounce函数使其返回一个带有cancel方法的函数，然后在useEffect中清理。自定义debounce增加取消功能： function debounce(func, wait) { let timeout; function debounced(...args) { const context = this; clearTimeout(timeout); timeout = setTimeout(() => { func.apply(context, args); }, wait); } debounced.cancel = () => { clearTimeout(timeout); }; return debounced; } 在React函数组件中使用： import React, { useState, useEffect, useRef } from 'react'; function SearchInput() { const [query, setQuery] = useState(''); const debouncedSearch = useRef(); useEffect(() => { // 创建防抖函数 debouncedSearch.current = debounce((query) => { // 发起请求 console.log('Searching for:', query); }, 500); // 清理函数 return () => { debouncedSearch.current.cancel(); }; }, []); const handleChange = (e) => { const query = e.target.value; setQuery(query); debouncedSearch.current(query); }; return ( <input type="text" value={query} onChange={handleChange} /> ); } 同样，节流函数也可以增加取消功能，但通常节流函数在组件卸载时不需要取消，因为定时器会在执行一次后自然清除。但为了安全，也可以提供取消方法。总结：根据具体场景选择防抖或节流，并注意在组件卸载时取消未执行的函数调用，以避免内存泄漏。相关问题： 1. 防抖和节流的主要区别是什么？分别适用于哪些场景？ 2. 在React中，如何正确地在函数组件中实现防抖或节流以避免内存泄漏？ 3. 除了防抖和节流，还有哪些方法可以优化前端频繁触发的事件？ </think>在前端设计中添加节流（Throttle）和防抖（Debounce）功能可有效避免重复调用后端接口。以下是具体实现方法和应用场景： --- ### **1. 防抖（Debounce）** **原理**：事件触发后等待固定时间再执行回调。若在等待期内重复触发，则重新计时。 **适用场景**：搜索框输入（用户停止输入后再请求）、窗口大小调整。 #### **实现代码** ```javascript function debounce(func, delay) { let timer; return function(...args) { clearTimeout(timer); // 清除之前的定时器 timer = setTimeout(() => { func.apply(this, args); // 延迟执行 }, delay); }; } // 示例：输入框搜索 const searchInput = document.getElementById("search"); const fetchData = () => { /* 调用后端API */ }; searchInput.addEventListener("input", debounce(fetchData, 500)); // 停止输入500ms后触发 ``` --- ### **2. 节流（Throttle）** **原理**：固定时间内只执行一次回调，后续触发被忽略。 **适用场景**：按钮频繁点击、滚动事件、实时保存。 #### **实现代码** ```javascript function throttle(func, interval) { let lastTime = 0; return function(...args) { const now = Date.now(); if (now - lastTime >= interval) { func.apply(this, args); // 执行回调 lastTime = now; // 重置最后执行时间 } }; } // 示例：按钮提交 const submitButton = document.getElementById("submit"); const submitForm = () => { /* 提交数据到后端 */ }; submitButton.addEventListener("click", throttle(submitForm, 1000)); // 1秒内仅生效一次 ``` --- ### **3. 结合框架的最佳实践** #### **React Hooks 示例** ```jsx import { useCallback, useRef } from "react"; function SearchComponent() { const fetchResults = useCallback(debounce((query) => { // 调用API：/api/search?q=${query} }, 500), []); return <input onChange={(e) => fetchResults(e.target.value)} />; } ``` #### **Vue 3 示例** ```vue <template> <button @click="throttledSubmit">保存</button> </template> <script setup> import { ref } from "vue"; const submitData = () => { /* API调用 */ }; const throttledSubmit = ref(throttle(submitData, 1000)); </script> ``` --- ### **4. 关键区别与选型建议** | **特性** | 防抖（Debounce） | 节流（Throttle） | |----------------|--------------------------|--------------------------| | **触发时机** | 停止触发后执行 | 固定间隔执行 | | **适用场景** | 输入验证、搜索建议 | 按钮点击、滚动事件 | | **执行次数** | 最终只执行一次 | 周期性执行 | | **极端案例** | 用户连续输入10秒，仅触发1次 | 用户连续点击，每秒触发1次 | > 💡 **选型原则**： > - 需要 **即时响应但避免高频次请求**（如按钮提交） → 节流 > - 需要 **等待用户操作结束**（如输入完成） → 防抖 --- ### **5. 进阶优化** - **取消机制**：防抖函数中增加 `cancel()` 方法，用于组件卸载时清理定时器[^1]。 - **参数传递**：确保回调函数能获取最新事件参数（如 `event` 对象）。 - **异步处理**：结合 `Promise` 或 `async/await` 处理API返回结果。 ```javascript // 带取消功能的防抖 function debounce(func, delay) { let timer; const debounced = (...args) => { clearTimeout(timer); timer = setTimeout(() => func(...args), delay); }; debounced.cancel = () => clearTimeout(timer); // 暴露取消方法 return debounced; } // React 中使用：useEffect 清理 useEffect(() => { const debouncedFn = debounce(fetchData, 500); return () => debouncedFn.cancel(); // 组件卸载时取消 }, []); ``` ---