防抖和节流以及应用场景

最新推荐文章于 2025-10-29 20:16:36 发布

原创最新推荐文章于 2025-10-29 20:16:36 发布 · 5.6k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

防抖是将多次执行变为最后一次执行，比如百度搜索，就应该用防抖，当我连续不断输入时，不会发送请求；当我一段时间内不输入了，才会发送一次请求；如果小于这段时间继续输入的话，时间会重新计算，也不会发送请求。

应用场景：输入框

节流是将多次执行变成每隔一段时间执行调用一次函数，而不是一触发事件就调用一次，这样就会减少资源浪费。

应用场景：比如窗口调整、页面滚动、抢购和疯狂点击等会用到节流。

节流与防抖的区别：
节流与防抖的前提都是某个行为持续地触发，不同之处只要判断是要优化到减少它的执行次数还是只执行一次就行。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

风吹过八千里.

关注关注

2
点赞
踩
9

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

防抖和节流（详细）使用场景和区别

留着鼻涕敲代码

10-22

3万+

1.防抖（多次触发只执行最后一次）作用：高频率触发的事件,在指定的单位时间内，只响应最后一次，如果在指定的时间内再次触发，则重新计算时间防抖类似于英雄联盟回城6秒，如果回城中被打断，再次回城需要再等6秒实现代码： <body> <input type="text" id="inp"> <script> // 1.封装防抖函数 function debounce(fn, time) {

防抖和节流的应用

DTCloud

05-13

2116

防抖（debounce）和节流（throttle）是优化高频触发事件的技术，它们可以提高性能，避免不必要的计算和函数执行。

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

面试官必问！防抖与节流从原理到手撕代码，一篇通关！

热门推荐

你若盛开，清风自来

07-08

1万+

防抖和节流是在JavaScript中常用的两种技术，用于限制某个函数在短时间内被频繁调用。防抖的原理是在事件被触发后，延迟一定时间执行函数，如果在延迟时间内触发了该事件，则重新计时，直到延迟时间内没有再次触发事件，才执行函数。节流的原理是在规定的时间内，只让函数执行一次，无论事件触发的频率如何。防抖：防止抖动，单位时间内事件触发会被重置，避免事件被误伤触发多次。代码实现重在清零 clearTimeout节流：控制流量，单位时间内事件只能触发一次，如果服务器端的限流即 Rate Limit。

防抖和节流，在很多场景中都会使用到

05-25

防抖和节流是JavaScript中优化性能的重要技术，它们主要用于控制事件处理函数的执行频率，以避免在高频触发的情况下导致不必要的...在实际开发中，根据场景灵活运用防抖和节流，可以显著提升用户体验并减少资源浪费。

什么是防抖和节流，它们的应用场景有哪些？

破损的天堂鸟博客

11-02

901

防抖（Debounce）和节流（Throttle）是前端开发中常用的性能优化技术，用于控制事件触发的频率，从而提高应用的性能和用户体验。防抖的主要作用是在单位时间内避免事件被多次触发，通常是在事件停止触发后的指定时间内执行函数。如果在这段时间内再次触发了事件，则重新计时。节流则是控制单位时间内事件只能触发一次，不管事件触发了多少次，都只能在指定的时间间隔内执行一次。总结来说，防抖和节流都是为了优化高频率事件处理而设计的技术。

vue中使用防抖和节流

01-24

防抖(debounce)和节流(throttle)是两种常用的性能优化策略，它们可以帮助我们控制函数的执行频率，减少不必要的计算，从而提高应用的响应速度和效率。本文将详细介绍在Vue项目中如何实现和使用防抖与节流。 ### 1. ...

防抖和节流(使用场景以及区别)

2302_76609856的博客

11-29

925

我相信同学也经常碰到这种问题,就是一些事件持续触发而达不到自己想要的效果。在这里举个例子就一个简单的鼠标移动事件,但是我想要的是移动只是触发一次,但是它一直给我调用,就很烦,所以就需要解决,那么有什么办法呢?JS函数防抖和节流就是用来处理频繁触发的函数执行问题的常用方法为什么会有两种方法嘞?那肯定是他们的使用环境有区别咯首先和大家介绍一下。

前端防抖和节流的知识点你还不懂？手撕防抖和节流函数、为什么要使用防抖和节流及应用场景

Bcoovo的博客

07-08

306

2、事件被触发时，判断当前触发时间与上一次执行的时间差是否大于间隔时间（delay），如果大于：执行回调函数，反之忽略掉即可。在用户停止某个操作一段时间之后才执行相应的监听函数，而不是在用户操作的过程当中，浏览器触发多少次事件，就执行多少次监听函数。如果事件的回调函数较为复杂，就会导致响应跟不上触发，出现页面卡顿，假死现象。当事件被触发时，设定一个周期延迟执行动作，若期间又被触发，则重新设定周期，直到周期结束，执行动作。: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时。

防抖和节流详解&使用场景

qq_38920348的博客

01-08

491

节流：控制流量，单位时间内事件只能触发一次，与服务器端的限流 (Rate Limit) 类似。防抖：防止抖动，单位时间内事件触发会被重置，避免事件被误伤触发多次。节流策略（throttle），控制事件发生的频率，如控制为1s发生一次，甚至1分钟发生一次。防抖策略（debounce）是当事件被触发后，延迟n秒后再执行回调，如果在这n秒内事件又被触发，则重新计时。作用：高频率触发的事件，在指定的单位时间内，只响应最后一次，如果在指定的时间内再次触发，则重新计算时间。二、节流（规定时间内只触发一次）

节流、防抖及使用场景

我是一只蘑菇17的博客

02-07

1905

函数防抖(debounce) 概念：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。 //模拟一段ajax请求 function ajax(content) { console.log('ajax request ' + content) } let i...

防抖节流理解与应用场景

m0_49471668的博客

03-12

2785

在开发中，常常会去监听滚动事件或者用户输入框验证事件，如果事件处理没有频率限制，会加重浏览器的负担，影响用户体验感。因此可以采取防抖(debounce)和节流（throttle）来处理，减少调用事件的频率，达到较好的用户体验。防抖（debounce): 一：html中在事件触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时，重新触发定时器 <body> <div class="box" id="container"> <p&gt

什么是防抖和节流？有什么区别？如何实现？

海阔天空

04-25

3338

什么是防抖和节流？有什么区别？如何实现？节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时节流完成节流可以使用时间戳与定时器的写法使用时间戳写法，事件会立即执行，停止触发后没有办法再次执行 function throttled1(fn, delay = 500) { let oldtime = Date.now() return function (…args) { let newtime = Date.now() i

防抖和节流—应用场景及实现

Liuer_Qin的博客

09-05

382

防抖和节流防抖概念假定时间间隔为200ms，如果触发事件后的200ms内再次触发事件，则重新等待200ms，否则将成功执行指定函数。 应用场景 数据查询、监控用户输入代码实现 function search() { var t = null; // 使用闭包 return function () { if (t) { clearTimeout(t); t = null } t = setTimeout(() => { console.log('执行

防抖和节流（详解）使用场景和区别

止于至善

11-08

9194

防抖策略（debounce）是当事件被触发后，延迟n秒后再执行回调，如果在这n秒内事件又被触发，则重新计时。作用：高频率触发的事件，在指定的单位时间内，只响应最后一次，如果在指定的时间内再次触发，则重新计算时间。防抖：防止抖动，单位时间内事件触发会被重置，避免事件被误伤触发多次。代码实现重在清零 clearTimeout。防抖可以比作等电梯，只要有一个人进来，就需要再等一会儿。业务场景有避免登录按钮多次点击的重复提交。

节流和防抖及其应用场景...

weixin_42317878的博客

03-24

557

函数防抖(debounce) :在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。 function debounce(fn，delay) { let timer; const that = this; return function (){ const _args = arguments; if (timer ){ clearTim...

简述一下防抖和节流，以及应用场景

muge1161105403的博客

06-09

1万+

简述：（1）防抖：就是将一段时间内连续的多次触发转化为一次触发。（2）节流：减少一段时间内触发的频率区别：两者区别在于函数节流是固定时间做某一件事，比如每隔1秒发一次请求。而函数防抖是在频繁触发后，只执行一次（两者的前提都是频繁触发）场景：（1）函数节流的应用场景一般是onrize，onscroll等这些频繁触发的函数，比如你想获取滚动条的位置，然后执行下一步动作比如你想获取滚动条的位置，然后执行下一步动作。如果监听后执行的是Dom操作，这样的频繁触发执行，可能会影响到浏览器性能，甚至会将浏览器

js防抖和节流的应用场景

10-10

在前端开发中，防抖和节流是两种常用的优化技术，用于处理用户频繁触发的事件，避免性能问题，提升用户体验。以下是它们常见的应用场景： ### 防抖的应用场景 - **搜索提示**：在搜索框输入时，通过 `input` 的 `input` 事件发送请求数据是很频繁的操作。使用防抖技术，可避免用户在输入过程中不断发送请求，而是在用户停顿或停止输入一段时间后才触发请求，减少不必要的请求次数，降低服务器压力。例如： ```javascript // 防抖debounce代码 function debounce(fn, delay) { let timeout = null; return function() { // 每当用户输入的时候把前一个 setTimeout clear 掉 clearTimeout(timeout); // 然后又创建一个新的 setTimeout，这样就能保证 interval 间隔内如果时间持续触发，就不会执行 fn 函数 timeout = setTimeout(() => { // 使用箭头函数不用保存 this fn.apply(this, arguments); }, delay || 500); }; } // 模拟搜索请求 function searchRequest(query) { console.log(`Searching for: ${query}`); } const input = document.getElementById('search-input'); input.addEventListener('input', debounce((e) => { searchRequest(e.target.value); }, 300)); ``` - **窗口大小调整**：当用户调整浏览器窗口大小时，`resize` 事件会频繁触发。使用防抖可以确保只有在用户停止调整窗口一段时间后，才执行相应的布局调整或重新计算操作，避免频繁的重排和重绘，提升性能 [^2][^3]。 - **按钮点击**：防止用户在短时间内多次点击按钮，例如提交表单按钮。使用防抖可以确保只有最后一次点击才会触发提交操作，避免重复提交数据 [^1]。 ### 节流的应用场景 - **页面无限加载**：在页面的无限加载场景下，用户滚动页面时，需要每隔一段时间发一次 `Ajax` 请求，而不是在用户停下滚动操作时才去请求数据。使用节流技术可以保证在规定时间内一定会执行一次请求，避免频繁请求数据 [^1]。 ```javascript // 节流 throttle 代码 function throttle(fn, delay) { let timer = null; return function() { if (!timer) { fn.apply(this, arguments); timer = setTimeout(() => { timer = null; }, delay); } }; } // 模拟滚动加载数据 function loadMoreData() { console.log('Loading more data...'); } window.addEventListener('scroll', throttle(loadMoreData, 500)); ``` - **鼠标移动**：当鼠标移动时，`mousemove` 事件会频繁触发。在一些需要根据鼠标位置进行实时计算或更新的场景中，如绘图应用，使用节流可以控制计算和更新的频率，避免性能问题 [^2]。 - **键盘输入**：在某些场景下，如游戏中的按键操作，需要控制按键事件的触发频率，避免玩家因快速按键导致游戏逻辑出现异常。使用节流可以确保按键事件在一定时间内只触发一次 [^2]。