鼠标滚轮事件太快了。如何禁用它

时间:2014-06-21 20:25:42

标签: javascript jquery mousewheel

我想在我的网站udowalzfinal.umatechcorner.com上引入像hugeinc.com这样的效果

我做了以下

$(window).on({
'DOMMouseScroll mousewheel': ScrollBegin
});

var delta = 0;
var scrollThreshold = 10;

        function ScrollBegin(e) {

        // --- Scrolling up ---
    if (e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0) { 
        delta--;
                    console.log(delta);
        if ( Math.abs(delta) >= scrollThreshold) {
         timer = setTimeout(function () {
                    MoveScreen('up');                        
                }, 800);
        clearTimeout(timer);
    }
}

// --- Scrolling down ---
else {

    delta++;
 console.log(delta); 
    if (delta >= scrollThreshold) {
     timer = setTimeout(function () {
                    MoveScreen('down');
                    clearTimeout(timer);

                }, 800);
    }
}

// Prevent page from scrolling
return false;    
        }

我不知道要为scrollThreshold设置什么值。

鼠标轮事件被提升&amp; ScrollBegin被执行。但在IE和IE中这太慢了使用Apple Mouse在Safari中过快。

每次鼠标滚轮移动都会引发鼠标滚轮事件。就我而言,当我滚动鼠标滚轮一次时,它会将事件提升10次。如何禁用这9个事件并仅处理一次。

How to get a MouseWheel Event to fire only once in jQuery?文章无法解决我的问题。这只能支持一次和一次上升。然后下来一次。但我的页面中有5张幻灯片。

有人可以帮忙吗?

2 个答案:

答案 0 :(得分:1)

你想看看Underscore.js的Debounce功能。你可以直接使用debounce将下划线带到你的页面上(不是一个坏主意),或者自己实现它。还有油门,它的工作方式略有不同;这是两个例子:

http://goo.gl/jEl9lA

答案 1 :(得分:0)

您应该使用debouncer

//Debouncer functions add a delay between an event and a reaction, so scaling and scrolling don't evoke a function dozens of times.
function debouncer(func, timeout) {
    var timeoutID , timeout = timeout || 200;
    return function () {
        var scope = this , args = arguments;
        clearTimeout( timeoutID );
        timeoutID = setTimeout( function () {
            func.apply( scope , Array.prototype.slice.call( args ) );
        } , timeout );
    };
}

这是一个通用功能。像这样使用它:

jQuery(window).scroll(debouncer(function(){
    //Call your scroll handler here.
}));

要真正微调延迟,请添加一个秒参数,例如:

jQuery(window).scroll(debouncer(function(){
    //Call your scroll handler here.
}), 600);