如何在多次触发事件时只执行一次？（函数防抖）

最新推荐文章于 2024-01-20 00:11:35 发布

aisiqi5873

最新推荐文章于 2024-01-20 00:11:35 发布

阅读量1.2k

点赞数

文章标签：移动开发

原文链接：http://www.cnblogs.com/cheeseCatMiao/p/7867072.html

版权

本文介绍了一种在网页开发中处理滚轮事件的高效方法，通过使用setTimeout和clearTimeout组合实现事件的防抖，确保了即使在用户快速滚动时，也仅执行一次事件处理函数，有效避免了资源浪费和性能瓶颈。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何让滚轮滑动一次只执行一次事件。

同样的问题，就是窗口多次调整后只允许触发一次事件，且延迟一段时间执行，如何解决。

只需要在事件开头加上clearTimeout即可，每次滑动时都清除排队执行的前面等候事件，以最后一次添加的事件为主。

var scrollEle = document.getElementById("inner");
var time;
var data;

scrollEle.onmousewheel = function(e)
{
clearTimeout(time);
time = setTimeout(function()
{
if(e.wheelDelta > 0)
{
if(scrollEle.scrollTop >= 400)
{
data = 0;
(function move()
{
data++;
scrollEle.scrollTop-=20;
if(data < 20)
{
setTimeout(move,16);
}
})();
}
}
else
{
if(scrollEle.scrollTop <= 800)
{
data = 0;
(function move()
{
data++;
scrollEle.scrollTop+=20;
if(data < 20)
{
setTimeout(move,16);
}
})();
}
}
},300);
e.preventDefault();
};