等待函数再次执行

Question

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

这是我的代码

$(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
        }

等待函数再次执行

Wait before function can be executed again

javascript

jquery

scroll

delay