Отклонить вызовы функций по их аргументам

У Дэвида Уолша есть отличная реализация защиты от дребезга здесь.

// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

Я использую его в производстве, и он отлично работает.

Теперь я столкнулся с немного более сложным случаем необходимости устранения дребезга.

У меня есть событие, которое вызывает обработчик событий с таким параметром: $(elem).on('onSomeEvent', (e) => {handler(e.X)} );

Я согласен с тем, что это событие часто запускается и вызывает обработчик даже 1000 раз в секунду. Мне не нужно устранять дребезг самого обработчика. Но в моем случае для каждого e.X я хочу, чтобы он вызывался только один раз за период, скажем, 250 мс.

Я думал о создании двумерного массива, который содержит x и время последнего выполнения, но я не хочу объявлять какие-либо глобальные переменные.

Любые идеи?

* ИЗМЕНИТЬ *

Прочитав ответ @Tim Vermaelen, я реализовал это так, и это сработало:

export function debounceWithId(func, wait, id, immediate?) {
        var timeouts = {};
        return function () {
            var context = this, args = arguments;
            var later = function () {
                timeouts[id] = null;
                if (!immediate) func.apply(context, args);
            };
            var callNow = immediate && !timeouts[id];
            clearTimeout(timeouts[id]);
            timeouts[id] = setTimeout(later, wait);
            if (callNow) func.apply(context, args);
        };
    };

javascript events debouncing
person Dorad    schedule 12.12.2016    source источник
comment
var timeout тоже не является глобальной переменной в исходном коде?   -  person Bergi    schedule 12.12.2016
comment
Кажется, к сожалению   -  person Dorad    schedule 12.12.2016
comment
Не прискорбно, а именно то, что вы хотите?   -  person Bergi    schedule 12.12.2016
comment
Видимо, как то сделал работу   -  person Dorad    schedule 12.12.2016

Ответы (1)


arrow_upward
5
arrow_downward

Я всегда использую следующее:

var debounce = (function () {
    var timers = {};

    return function (callback, delay, id) {
        delay = delay || 500;
        id = id || "duplicated event";

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

        timers[id] = setTimeout(callback, delay);
    };
})(); // note the call here so the call for `func_to_param` is omitted

Я не думаю, что есть большая разница с вашим решением, за исключением того факта, что я могу добавлять уникальные идентификаторы в события. Вам придется обернуть это вокруг handler(e.X), если я правильно понимаю.

debounce(func_to_param, 250, 'mousewheel');
debounce(func_to_param, 250, 'scrolling');
person Tim Vermaelen    schedule 12.12.2016
comment
Я сейчас попробую и дам вам знать. - person Dorad; 12.12.2016
comment
Работал как шарм. Выкладываю свою модификацию для других. - person Dorad; 12.12.2016