如何使用mousewheel插件调节功能？

Question

我正在使用此插件： https://github.com/jquery/jquery-mousewheel

这是一个水平滚动的一页站点，该功能旨在用作“ scrollsnap”-当前部分上的滚动将强制将其捕捉到下一部分。但是，在第一次“快照”之后，它只会在大约5秒钟后发生，我认为这是由于函数连续触发太多次了。

function scrollSnap() {
    $('.page:not(:last-child)').each(function(){
        var nextTarget = $(this).next().position().left;
        $(this).mousewheel(function(){
            if(event.deltaY >= 50) {
                $('main').animate({
                    scrollLeft: nextTarget
                }, 700);
                console.log("scrolled to: ", nextTarget);
            }
        });
    });

    $('.page:not(:first-child)').each(function(){
        var prevTarget = $(this).prev().position().left;
        $(this).mousewheel(function(){
            if(event.deltaY <= -50) {
                $('main').animate({
                    scrollLeft: prevTarget
                }, 700);
                console.log("scrolled to: ", prevTarget);
            }
        });
    });
}

$(document).ready(function() {
    scrollSnap();
});

Answer 1

您可以使用debounce函数来限制此类事件。您可以创建自己的数据库，也可以使用内置的实用程序库，例如lodash。