防抖和节流常见的使用场景

时间: 2024-05-10 17:12:44 浏览: 68

js防抖和节流的深入讲解

5星 · 资源好评率100%

JavaScript中的防抖（debounce）和节流（throttle）是两种常见的性能优化技术，用于控制函数的执行频率，防止因频繁调用而导致的性能问题。这两种技术在处理如输入事件、滚动事件、窗口大小调整等场景时尤其有用。 ### 1. 防抖（Debounce） **1.1 防抖的概念** 防抖的核心思想是在一段时间内，如果事件被连续触发，那么只会执行最后一次触发的回调函数。如果在这段时间内又有新的触发，那么计时器会被重置，重新开始等待。防抖常用于限制函数的执行次数，例如在用户连续输入时仅在输入停止后执行搜索操作。 **1.2 应用场景** 1. **输入框实时搜索**：用户在输入框中输入内容，直到用户停止输入300毫秒后才发起搜索请求，减少不必要的请求。 2. **窗口大小调整**：当用户快速调整窗口大小时，仅在窗口大小停止变化后执行一次布局更新或计算。 **1.3 实现防抖** 以下是一个简单的防抖函数实现： ```javascript function debounce(fun, delay) { let timeoutId; return function (...args) { if (timeoutId) { clearTimeout(timeoutId); } timeoutId = setTimeout(() => { fun.apply(this, args); }, delay); }; } ``` ### 2. 节流（Throttle） **2.1 节流的概念** 节流是将函数的执行限制在一个固定的频率，即在设定的时间间隔内，不论事件触发多少次，都只执行一次。节流常用于限制执行频率，例如滚动事件中每隔一定时间才进行DOM操作。 **2.2 应用场景** 1. **滚动事件**：在页面滚动时，每300毫秒计算一次滚动位置，而不是每次滚动都计算，提高性能。 2. **地图拖拽**：拖动地图时，每间隔一定时间才更新一次地图坐标，避免频繁更新导致的卡顿。 **2.3 实现节流** 常见的节流有两种方式：时间戳版本和定时器版本。以下是时间戳版本的节流实现： ```javascript function throttle(fun, delay) { let prevTime = Date.now(); return function (...args) { const nowTime = Date.now(); if (nowTime - prevTime >= delay) { fun.apply(this, args); prevTime = nowTime; } }; } ``` 定时器版本的节流实现类似于防抖，但不取消已设置的定时器，而是用定时器保持固定的执行间隔： ```javascript function throttleWithTimer(fun, delay) { let timeoutId; let lastExecuteTime = 0; return function (...args) { const nowTime = Date.now(); if (nowTime - lastExecuteTime >= delay) { fun.apply(this, args); lastExecuteTime = nowTime; } else if (!timeoutId) { timeoutId = setTimeout(() => { fun.apply(this, args); timeoutId = null; lastExecuteTime = Date.now(); }, delay - (nowTime - lastExecuteTime)); } }; } ``` ### 3. 区别与选择防抖和节流的主要区别在于，防抖是减少执行次数，而节流是保证执行频率。防抖适用于那些只关心最后一次操作的场景，而节流适用于需要在固定频率内执行的场景。根据实际需求，选择合适的方法可以有效地提升用户体验和系统性能。总结，防抖和节流是JavaScript中优化性能的重要工具，它们能够帮助开发者有效地管理资源，避免因频繁调用而引起的性能问题。通过理解其工作原理并灵活应用，可以显著提升网页应用的响应速度和用户体验。

防抖和节流是常见的前端性能优化技术。简单来说，防抖和节流都是为了减少一些高频事件（如窗口大小改变、滚动等）的触发次数，从而减轻浏览器的压力，提升网页性能和用户体验。防抖通常是指在一定时间内多次触发同一事件，只执行最后一次操作的方法。比如在实时搜索框中输入关键字时，用户输入的速度很快，如果每次输入都立即向服务器发送请求，会对服务器造成很大压力。这时候我们可以使用防抖，将用户输入的关键字在一定时间内进行缓存，等待用户停止输入后再向服务器发送请求。节流通常是指在一定时间内只触发一次事件的方法。比如在页面滚动时，如果每次滚动都触发事件处理函数，会让页面变得卡顿。这时候我们可以使用节流，将滚动事件的触发频率降低，只在一定时间内执行一次事件处理函数。以下是防抖和节流的常见使用场景： - 实时搜索框 - 按钮点击事件 - 页面滚动事件 - 窗口大小改变事件

阅读全文

防抖和节流常见的使用场景

相关推荐

前端大数相加与防抖节流技巧

JavaScript中的函数节流和防抖技术

js防抖函数和节流函数使用场景和实现区别示例分析

浅析Vue 防抖与节流的使用

js代码-防抖和节流

浅析JavaScript 函数防抖和节流

js代码-防抖和节流函数

前端防抖节流使用场景

js原型链是什么 使用场景 闭包是什么 使用场景有哪些 如何实现防抖与节流 实例写出来

防抖和节流实现口头描述

vue中防抖和节流应用

节流和防抖的应用场景

JS函数防抖和节流的区别

防抖和节流有什么区别？

详细讲解js的防抖和节流

js防抖和节流 区别及实现方式

防抖和节流都能用什么实现

在vue中使用防抖和节流,防止重复点击或重复上拉加载实例

防抖与节流的封装函数与使用详解

最新推荐

潮流计算+二阶锥松弛+对偶形式的matlab源码+对偶理论说明文档.zip

Java贪吃蛇小游戏.zip学习资料资源

WordPress作为新闻管理面板的实现指南

管理建模和仿真的文件

函数与模块化编程宝典：J750编程高效之路

用C语言求有4个圆塔，圆心分别为（2，2)，(2，-2)，(-2，2)，(-2，-2)圆半径为1， 这4个塔的高度为10m 塔以外无建筑物接输入任意点的坐标 求该点的建筑高度（塔外的高度为零)的程序

NPC_Generator：使用Ruby打造的游戏角色生成器

"互动学习：行动中的多样性与论文攻读经历"

流程控制与循环结构详解：J750编程逻辑构建指南

python实现生成一个窗口，其窗口题目为“二冷配水模型模型”，窗口中包含八个输入栏，三个按钮，每个按钮点击后会产生一个不同的页面

js原型链是什么使用场景闭包是什么使用场景有哪些如何实现防抖与节流实例写出来

js防抖和节流区别及实现方式

用C语言求有4个圆塔，圆心分别为（2，2)，(2，-2)，(-2，2)，(-2，-2)圆半径为1，这4个塔的高度为10m 塔以外无建筑物接输入任意点的坐标求该点的建筑高度（塔外的高度为零)的程序