在前些日子的有博文介绍过鼠标滚轮,但都是其相关方法和属性,以及其兼容性方面的内容。而这篇文章主要是说明鼠标滚轮下不重复执行事件的问题和解决方案。

因为鼠标滚轮事件是一个重复不断的过程,因此用户在滚动鼠标滚轮时,在鼠标滚轮下的需要执行的函数会重复发生,比如,我们需要通过鼠标滚轮来控制多屏滑动,或者希望鼠标滚动来控制轮播图的切换,根本就无法知道用户滚动的幅度大小,那么就无法确定(e.wheelDelta||e.detail)的值,而轮播图的原理就通过对应的索引值来显示对应的图。

所以我们希望的结果是,用户鼠标无论是向下或者向上滚动时,不管他滚动幅度大小,都只执行一次相关函数

解决方案:设定一个布尔变量bOnce,开始设置其值为true。再设置一个延时定时器

var oTime=setTimeout(function(){bOnce=true},800);

滚动鼠标后设置bOnce为false,触发oTime。只有bOnce为真的时候才能执行鼠标滚轮下的函数,这样无论用户滚动滚轮快慢,鼠标滚动下的函数都只触发一次。

if (bOnce) {

doSomething… //鼠标滚轮下的事件

bOnce=false;
clearInterval(oTime);
oTime=setTimeout(function(){bOnce=true},800);
}

具体的demo页面:鼠标滚轮操作轮播图