使用防抖动（debounce）优化页面滚动

最新推荐文章于 2025-09-16 00:00:49 发布

原创最新推荐文章于 2025-09-16 00:00:49 发布 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #debounce

原生JS 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种优化网页滚动事件监听的方法，通过使用防抖技术减少事件处理频率，提高用户体验及浏览器性能。

优化前代码

var i = 0;
window.addEventListener('scroll',function(){
    console.log(i++);
},false);

优化后代码：

	var debounce = null;
	window.addEventListener('scroll',function(){
		if(debounce){
			clearTimeout(debounce);
		}
		debounce = setTimeout(function(){
			console.log("scroll");
		},500);
	
	})

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

h5css3_linhuai

关注关注

0
点赞
踩
2

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

防抖(debounce) 和节流(throttling)

独碟的博客

07-05

14万+

防抖和节流是针对响应跟不上触发频率这类问题的两种解决方案。在给DOM绑定事件时，有些事件我们是无法控制触发频率的。如鼠标移动事件onmousemove, 滚动滚动条事件onscroll，窗口大小改变事件onresize，瞬间的操作都会导致这些事件会被高频触发。如果事件的回调函数较为复杂，就会导致响应跟不上触发，出现页面卡顿，假死现象。在实时检查输入时，如果我们绑定onkeyup事件发请求去...

hover-scroll:响应式包含带有箭头和触摸优化的滚动内容

05-04

4. **性能优化**：考虑到网页性能，Hover-Scroll 可能会使用防抖动（debounce）或节流（throttle）技术来限制滚动事件的频率，防止频繁的计算和DOM更新导致的性能下降。 5. **可定制性**：作为开源项目，Hover-...

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

【转载】防抖动（debounce）和节流（throttle）

9527

06-23

192

Css3实现无缝滚动防抖

11-19

问题

滚动加载优化，用 Vue 实现滚动防抖，防止多次加载

最新发布

m0_72227014的博客

09-16

247

本文介绍了如何使用防抖技术优化网页滚动加载体验。防抖技术通过延迟函数执行（如设置2秒等待期），在用户频繁滚动时重置计时器，确保只在停止滚动后才触发数据加载，避免重复请求。文章提供了Vue实现代码，包括滚动监听、容器设置和防抖逻辑，并强调必须为滚动容器设置overflow属性。该技术适用于无限滚动、导航栏控制等场景，能有效提升性能和用户体验。

高性能滚动scroll（防抖和节流）

cc_fys的博客

08-11

1万+

滚动优化的由来滚动优化其实也不仅仅指滚动（scroll 事件），还包括了例如 resize 这类会频繁触发的事件。 var i = 0; window.addEventListener('scroll',function(){ console.log(i++); },false); 在绑定 scroll 、resize 这类事件时，当它发生时，它被触发的频次非常高，间...

css3动画效果抖动解决方法

09-22

主要介绍了css3动画效果抖动解决方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

节流与防抖

zk2012066650的博客

12-18

351

为什么要节流与防抖在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。什么是防抖防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时...

通过实例讲解JS如何防抖动

10-16

JavaScript中的防抖动（Debouncing）是一种优化技术，用于限制函数执行的频率，尤其是在处理高频率触发的事件，如窗口滚动、输入框输入等。防抖动的主要目的是避免在短时间内重复执行函数，减少不必要的计算，提高...

jQuery百度百科页面滚动导航代码.zip

05-23

除此之外，代码可能还涉及到一些细节优化，比如防抖动（debounce）处理，以减少频繁滚动时的性能消耗；或者节流（throttle）技术，以限制滚动事件处理的频率，提高响应速度。总结起来，"jQuery百度百科页面滚动...

js+css3页面滚动图片倾斜动画特效

06-10

4. **防抖动处理**：为了优化性能，通常会使用防抖动(debounce)或节流(throttle)技术来限制滚动事件的处理频率，避免频繁的样式更新导致的性能问题。 **文件结构和关联** - `index.html`：这是网页的主文件，包含...

事件的节流（throttle）与防抖（debounce）

半夏_2021的博客

06-29

558

事件的节流（throttle）与防抖（debounce）

vue监听scroll使用节流函数（throttle）或防抖函数（debounce）遇到的坑

热门推荐

山水子农

08-06

1万+

在浏览器 DOM 事件里面，有一些事件会随着用户的操作不间断触发。比如：重新调整浏览器窗口大小(resize)，浏览器页面滚动(scroll)，鼠标移动(mousemove)、文字输入(keyup)、射击游戏中(mousedown、keydown)。也就是说用户在触发这些浏览器操作的时候，如果脚本里面绑定了对应的事件处理方法，这个方法就不停的触发。在项目中需要通过监听元素的scro...

debounce防抖

qq_42345758的博客

05-31

440

首先是为什么防抖，当我们持续反复触发时间的时候，会加重浏览器的负担，用户体验会很少所以我们可以采用debounce(防抖)和throttle(节流)来减少频繁使用的频率但是不影响功能 function debounce(self, func, immediate) { return function() { var context = self; ...

vue中使用 lodash Debounce防抖

qq_25131799的博客

03-17

1万+

Debounce，又称防抖动函数，常被被用来控制前端异步请求及其它高耗任务的频率。概念比较抽象，了解一个业务场景，就很容易理解了。比如通过搜索过滤一个列表，通过“@change=“search”监听输入向后台发起请求，如果每输入一个字母就调用一次”search“向后台发送一次请求，效率将会很低，如果可以将调用search函数控制在一定时间内，比如1秒内，在这一秒钟，我输入了5个字母，s...

极简版JavaScript 节流和防抖

weixin_44717047的博客

10-21

424

极简版JavaScript 节流和防抖

防抖（debounce）和节流（throttle）

qq_24892029的博客

07-05

597

我们在日常开发中，经常会遇到处理系统高频回调的问题，比如：scrollView 快速滚动的回调（scrollViewDidScroll），又比如用户输入文本时textView的回调（textViewDidChange），在这些场景下，为了降低CPU负担，我们一般会使用一些方法降低高频次计算，这篇文章介绍解决高频次计算的两种方法：防抖（debounce）和节流（throttle）。...

Vue中对滚动事件使用防抖和节流

weixin_41395548的博客

01-15

2000

在Vue中使用防抖和节流优化 1. utils.js /* 防抖 */ function debounce(func, delay) { let timer = null; return function () { if (timer) { clearTimeout(timer); timer = null; } timer = setTimeout(() => { func(...arguments); }, delay);

用节流处理下拉刷新获取新内容刷新多次的问题

qq_55685361的博客

05-25

594

在写这个项目时我发现在滚动事件中符合滚动条件的情况下，由于触发多次滚动条件会出现刷新多次的情况，我使用了节流的的方式解决了这个问题防抖具体操作如下（下列步骤，和代码内注释相对应，可以方便查看）在主体盒子的高度<=页面向下滚动的距离加屏幕高度的情况进行判断是否执行（在满足条件时新增数据）根据 this.ok(默认为true) 判断是否为1秒内第一次执行，如果为true执行下列代码将 this.ok 设为 fales,下次再触发scroll事件时判断不通过以此阻止代码多次执行执行新增数据代码

防抖动事件

05-05

### 防抖动事件的实现与应用 #### 实现原理防抖（Debounce）是一种通过设定延迟时间来限制函数执行的技术。其核心在于，当某事件被触发时，不会立即执行绑定的回调函数，而是等待指定的一段时间后再执行；如果在这段时间内事件再次被触发，则重新计时并推迟执行。这种机制能够有效减少因高频事件引发的性能开销。以下是基于 JavaScript 的防抖函数实现方式： ```javascript function debounce(func, wait) { let timeout; return function(...args) { const context = this; clearTimeout(timeout); timeout = setTimeout(() => func.apply(context, args), wait); }; } ``` 此代码片段定义了一个通用的 `debounce` 函数[^3]。它接收两个参数：目标函数 `func` 和延迟时间 `wait`（单位为毫秒）。每当事件触发时，都会清除之前的定时器，并设置一个新的定时器，在经过指定的时间间隔后执行目标函数。 --- #### 应用场景防抖技术广泛应用于各种需要降低高频率操作影响的场景中，主要包括以下几个方面： 1. **搜索框输入联想** 用户在搜索框中输入文字时，通常会伴随大量的键盘事件触发。如果不加以控制，每次按键都将发起一次网络请求或复杂计算，这不仅浪费资源还可能导致界面卡顿。利用防抖技术，可以在用户停止输入一段时间之后再发送请求，从而显著提升效率。 2. **页面滚动加载更多** 当用户向下滚动网页至底部时，可能希望动态加载新内容。然而，滚动事件本身非常频繁，直接绑定加载逻辑会造成大量无意义的操作。借助防抖方法，可以确保仅在用户完全停下滚动动作后的特定时刻才启动新的数据获取流程[^3]。 3. **窗口大小调整监听** 调整浏览器窗口尺寸同样会产生密集的 resize 事件通知。为了防止这些事件过度消耗 CPU 时间片，可以通过防抖手段延缓响应速度，使得最终效果既满足需求又兼顾性能表现[^1]。 --- #### 使用示例下面展示了一种实际运用防抖技巧的例子——监控表单字段变化情况： ```html <input type="text" id="searchBox"> <script> const searchBox = document.getElementById('searchBox'); // 定义查询接口模拟函数 function performSearch(query) { console.log(`Searching for "${query}"`); } // 创建带防抖特性的处理器 const handleInputChange = debounce((event) => { const query = event.target.value.trim(); if (query.length > 0) { performSearch(query); } }, 500); // 绑定到 input 事件上 searchBox.addEventListener('input', handleInputChange); </script> ``` 在此案例里，我们为文本框绑定了一个经由 `debounce` 封装过的事件监听程序。这样即使用户快速敲击多个字符也不会立刻触发展示行为，而要等到他们暂停打字至少半秒钟才行[^3]。 --- ### 总结综上所述，JavaScript 中的防抖功能是一项极其重要的工具，可以帮助开发者应对那些容易引起系统负担过高或者用户体验下降的情况。无论是针对实时交互还是异步通信环节，合理采用此类优化措施都能带来明显的改善作用。