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

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

转载最新推荐文章于 2024-01-20 00:11:35 发布 · 696 阅读

0 ·

CC 4.0 BY-SA版权

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

文章标签：

#javascript #ViewUI

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

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

只需要在事件开头加上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();
};