浅谈JS防抖与节流

Roc-xb

已于 2024-09-15 06:00:23 修改

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签：防抖节流 javascript

于 2021-07-03 12:41:47 首次发布

本文链接：https://blog.csdn.net/qq_19309473/article/details/118438363

前端专栏收录该内容

124 篇文章 ¥49.90 ¥99.00

订阅专栏

1、名称解释

防抖：防抖就是防止抖动，避免事件的重复触发。
应用场景：
①点击按钮事件，用户在一定时间段内的点击事件，为了防止和服务端的多次交互。
②输入框的自动保存事件
③浏览器的resize事件
节流：节流就是减少流量，将频繁触发的事件减少，控制事件触发的频率。
应用场景：
①scroll事件，滚动的过程中每隔一段时间触发事件。

2、实现代码

（1）防抖代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="I

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Roc-xb

关注关注

1
点赞
踩
31

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

订阅专栏

防抖与节流

qq_37635012的博客

04-08

724

如果用户会频繁的触发事件执行，而对于DOM操作，资源加载等耗费性能的处理，就会导致响应跟不上触发，很有可能导致界面卡顿，甚至浏览器的崩溃，防抖和节流就是解决这种问题的。函数防抖和节流就是为了处理同一时刻事件函数的触发频率和执行频率这两者关系的，防抖和节流都是为了降低函数执行频率的策略。防抖和节流本质都是以闭包形式存在，通过对事件对应的回调函数进行包裹、以自由变量的形式缓存时间信息，最后用setTi...

【JS】浅谈防抖与节流

菜就多练

03-11

971

防抖与节流算是面试题常问的一题。各个博客也经常拿电梯举例，再回顾一下。防抖：假设你进入一部电梯，当你按某个楼层，电梯10秒关一次门，正要关闭的时候。另外的人又按了开门的按钮后进入电梯，此时电梯门又要等10秒中关闭。直到没有人按开门按钮，最后的关闭按钮才会关门。节流：我们上下班经常坐地铁，我们知道每到一站会有个15秒上下客时间，超过15秒地铁门就会关闭，坐不上和坐过站的都只能等下一辆地铁。防抖: 执行最后一次节流：每隔一段时间执行一次。

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

JS中的防抖、节流

FunctionJon的博客

06-14

3886

js节流、防抖操作。

防抖和节流的区别

热门推荐

weixin_45709829的博客

04-01

4万+

一、js防抖和节流在进行窗口的resize、scroll、输出框内容校验等操纵的时候，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常之差。那么为了前端性能的优化也为了用户更好的体验，就可以采用防抖（debounce）和节流（throttle）的方式来到达这种效果，减少调用的频率。二、为什么滚动scroll、窗口resize等事件需要优化滚动事件的应用很频繁：图片懒加载、下滑自动加载数据、侧边浮动导航栏等。在绑定scroll、resize事件时，但它发生的时候，它被触发的频率非

JavaScript防抖与节流

2301_82023822的博客

04-11

2822

是一种。

JS防抖和节流

叶子yes的博客

08-27

1万+

在进行窗口的操作或者输入框操作时，如果事件处理函数用的频率无限制，会加重浏览器和服务器的负担，此时我们就可以用防抖（debounce）和节流（throttle）的方式来减少调用频率，同时又不影响实际效果。在设定的时间内触发一次事件，会在设定的时间结束之后执行该事件处理程序，如果在设定的时间内多次触发事件，则每次触发事件都会重新计时。（可以将防抖类比成电梯：第一个人进电梯之后，电梯会在5秒之后自动关闭电梯门，如果在这5秒内又有人进来了，那么电梯会重新等待5秒后再关门。）...

浅谈JS函数节流防抖

10-19

函数节流和函数防抖是前端JavaScript中经常使用的两种技术，用于控制事件处理器在一定时间内的执行频率。它们主要用于性能优化，以避免因高频率的事件触发导致的浏览器卡顿甚至崩溃。函数节流（Throttle）的核心...

浅谈JavaScript节流和防抖函数

10-14

JavaScript中的节流（Throttle）和防抖（Debounce）是两种常见的技术手段，用于控制事件处理器的触发频率，从而提高程序性能和用户体验。节流函数（Throttle）的目的是在一段给定的时间内只执行一次回调函数，不管...

JS的防抖和节流

weixin_33725722的博客

03-02

187

在浏览器中如果一个事件被频繁触发，比如输入框的 keyup, 窗口的 resize 以及 scroll 事件等，如果不做任何处理，事件的回调函数将会对应执行，这必然会加重浏览器的负担，影响用户的体验。面对这种场景，我们可以用函数的防抖 (debounce) 和节流 (throttle) 来处理。函数防抖防抖 debounce: 让事件触发时的回调在一定的延时后执行。如果在计时期间又触发了事...

js防抖和节流

JiaPeng366的博客

04-08

546

1、概念防抖：指在事件被触发的n秒后再执行回调，如果在这n秒内事件又被触发，则重新计时。节流：指在单位时间内，只能有一次触发事件的回调函数执行，如果在同一单位时间内事件再次被触发，则不生效。 2、应用场景防抖：表单验证需要服务端配合，如input输入用户名，需要在输入过程中查询该用户是否注册过，连续的输入事件只有最后一次执行请求操作。节流：检测浏览器的resize事件，根据resize的变化需要实时计算的大小和位置的场景。连续的事件调用，会变成每单位时间只触发一次回调。 3、函数实现函数防抖的实现

JS防抖节流

yin_ping1101的博客

05-01

552

1.防抖节流（参考防抖节流） 1.1 防抖防抖，顾名思义，防止抖动。用于将用户的操作行为触发转换为程序行为触发，防止用户操作的结果抖动。一段时间内，事件在我们规定的间隔 n 秒内多次执行，回调只会执行一次。特点：等待某种操作停止后，加以间隔进行操作持续触发不执行不触发的一段时间之后再执行应用场景：mousemove 鼠标滑动事件防抖...

JS防抖节流

fay_ren的博客

05-27

382

JS的防抖和节流

JS防抖和节流详解以及节流立即执行

qq_44741577的博客

02-01

1万+

文章摘要防抖和节流是优化高频事件执行的两种重要技术。防抖（debounce）在事件停止触发后延迟执行，适用于搜索输入、窗口调整等场景；节流（throttle）则限制事件在固定时间间隔内最多执行一次，适用于滚动加载、防止重复提交等场景。两者区别在于：防抖确保最终只执行一次，而节流保证均匀执行。文章详细介绍了实现原理、代码示例，并推荐使用lodash库的_.debounce和_.throttle方法。在Vue项目中可通过生命周期钩子整合这些方法，既能提升性能又避免频繁操作带来的问题。

JavaScript：节流与防抖

m0_65029152的博客

07-20

6005

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

JS防抖与节流

h360583690的博客

08-18

562

前言 JS中防抖与节流算是性能优化的知识，在编写代码中不注重防抖与节流的方面，会造成资源浪费，严重会造成浏览器卡死，崩溃等影响。防抖与节流都是为了减轻浏览器的压力，但又有些区别。防抖是让一个函数在一段时间间隔内没有调用，才开始执行被调用。节流是让一个函数无法在很短的时间间隔内被多次调用。意思就是一个函数被调用了后，得让它歇一下，等它歇完了（等一定的时间间隔之后），才能被再次调用。一、防抖像我们平常在输入框输入时，每输入一个字符...

js 函数节流和防抖

weixin_33920401的博客

10-19

115

js 函数节流和防抖 throttle 节流事件触发到结束后只执行一次。应用场景触发mousemove事件的时候，如鼠标移动。触发keyup事件的情况，如搜索。触发scroll事件的时候，譬如鼠标向下滚动停止时触发加载数据。 coding 方法1 防抖 // function resizehandler(fn, de...