Question

我正在玩一些javascript和JQuery。每次用户滚动时，我都会尝试做一些具体的事情。当我使用带有scollwheel的鼠标时，它工作正常。但是当我在笔记本电脑上使用触控板时，速度非常快。我认为这是因为它在滚动时多次执行鼠标滚轮功能。所以我想限制你执行该功能的频率。如果用户继续滚动，则每次通话之间的延迟时间为500毫秒。它不应该延迟功能本身但是立即运行然后再等待500ms才能再次执行。希望你明白。

这是我的代码

$(window).bind('mousewheel', function(event) { // My mousewheel function.
    if (event.originalEvent.wheelDelta >= 0) {
        scroll(-1);
    } else {
        scroll(1);
    }
});

/* Functions */
function scroll(dir) {
    if (dir == -1) {
        if (current > 0) {
            current--;
        }
    } else {
        if (current < list.size() - 1) {
            current++;
        }
    }
    var number = 100 * current;
    var value = "translateY(-" + number + "vh)";
    main.css("transform", value);
    for (var i = 0; i < list.size(); i++) {
        $('#nav li:nth-child(' + (i + 1) + ')').removeClass('active');
    }
    $('#nav li:nth-child(' + (current + 1) + ')').addClass('active');
}

Answer 1

您需要的是油门功能。此函数包含其他函数，并检查以ms为单位的延迟和事件的id。

/**
 * @description delay events with the same id, good for window resize events, scroll, keystroke, etc ...
 * @param {Function} func : callback function to be run when done
 * @param {Integer} wait : integer in milliseconds
 * @param {String} id : unique event id
 */
var throttle = (function () {
    var timers = {};

    return function (func, wait, id) {
        wait = wait || 200;
        id = id || 'anonymous';

        if (timers[id]) {
            clearTimeout(timers[id]);
        }

        timers[id] = setTimeout(func, wait);
    };
})(),

你可以像这样使用它：

$(window).on('mousewheel', function () {
    throttle(function(){
        var isScrollUp = event.originalEvent.wheelDelta >= 0 ? -1 : 1;
        scroll(isScrollUp);
    }, 500, 'my mousewheel event');
});

nice example下划线油门-vs-去抖。

Answer 2

您需要定义一个变量，指示何时运行该函数。在这种情况下是“isScrolling”变量。

 $(window).bind('mousewheel', function(event) { // My mousewheel function.
            if (event.originalEvent.wheelDelta >= 0) {
                scroll(-1);
            } else {
                scroll(1);
            }
        });

        /* Functions */
        var isScrolling = false; // This variable define when to run the function

        function scroll(dir) {

            if(isScrolling){
                return;
            }
            isScrolling = true;

            if (dir == -1) {
                if (current > 0) {
                    current--;
                }
            } else {
                if (current < list.size() - 1) {
                    current++;
                }
            }
            var number = 100 * current;
            var value = "translateY(-" + number + "vh)";
            main.css("transform", value);
            for (var i = 0; i < list.size(); i++) {
                $('#nav li:nth-child(' + (i + 1) + ')').removeClass('active');
            }
            $('#nav li:nth-child(' + (current + 1) + ')').addClass('active');


            setTimeout(function(){
                isScrolling = false;
            },500) // -> Here you can modify the time between functions call
        }

等待再次执行功能之前

2 个答案: