Лодаш.debounce с отдельными очередями для уникальных вариантов аргументов

я очень ценю lodash за его функциональность debounce и дроссельной заслонки. Я считаю, что хорошо понимаю случаи использования и реализовал их десятки раз.

однако, в зависимости от требований, может быть значительная и трудная для того чтобы уловить ошибку с _.debounce функции, имеющие аргументы. Это следующее:

Предположим, у вас есть функция debounce под названием debounceFn который принимает один аргумент и имеет интервал debounce 1000 мс.

  • 100ms:debounceFn(1)
  • 200ms:debounceFn(2)
  • 300ms:debounceFn(2)
  • 400ms: debounceFn(1)
  • 500ms:debounceFn(1)

дочерняя функция в конечном итоге вызовет с аргументом 1. Это отлично подходит для изменения размера событий, где вас волнует только последнее значение, но что, если вам нужны отдельные очереди в зависимости от аргументов? То есть вместо процесса вызывается с аргументом 1, вызовите процесс с аргументом 1 и с аргументом 2, но только один раз (потому что они оба дебютированы).

в качестве расширенного и немного более сложного примера рассмотрим комбинацию аргументов ниже, где комбинация создает уникальную очередь.

фактический выход:

  • a: lime b: kiwi

желаемый результат (порядок первых двух выходов может быть перевернул)

  • a: apple b: banana
  • a: apple b: orange
  • a: lime b: kiwi

var process = function(a, b) {
  document.writeln('a: ' + a + ' b: ' + b);
};

var debounceProcess = _.debounce(function(a, b) {
  process(a, b);
}, 1000);


setTimeout(function() {
  debounceProcess('apple', 'orange');
}, 100);
setTimeout(function() {
  debounceProcess('apple', 'banana');
}, 200);
setTimeout(function() {
  debounceProcess('apple', 'orange');
}, 300);
setTimeout(function() {
  debounceProcess('lime', 'kiwi');
}, 400);
<script src="https://cdn.rawgit.com/lodash/lodash/4.6.1/dist/lodash.min.js"></script>

я видел много таких вопросов на _.дребезга принимая аргумент. Это уже не интересный вопрос, так как вы создаете отдельные очереди дребезга?

что такое элегантный способ (простой, легко читаемый код) для выполнения этого с помощью Lodash _.функция debounce, библиотека Lodash и Собственные возможности JavaScript? Возможно, сочетание ... debounce and _.memoize (я пробовал обернуть _.debounce with _.memoize, но нужно будет исследовать, чтобы понять memoize дальше). Или, возможно, функция для "хэширования" аргументов и создания нового _.debounce очередь для каждой комбинации аргументов?

7
debouncing javascript lodash

1 ответов

хранить различные функции в объекте, где ключ представляет аргументы. Это хорошо работает в вашем случае, потому что аргументы являются строками.

var process = function(a, b) {
  $('body').append($('<p>').text('a: ' + a + ' b: ' + b));
};

function debounceProcess(a, b) {
  if (! debounceProcess.queues)    { debounceProcess.queues = {}; }
  if (! debounceProcess.queues[a]) { debounceProcess.queues[a] = {}; }
  if (! debounceProcess.queues[a][b]) {
    debounceProcess.queues[a][b] = _.debounce(function(a, b) {
      process(a, b);
    }, 1000);
  }
  return debounceProcess.queues[a][b](a, b);
};

setTimeout(function() {
  debounceProcess('apple', 'orange');
}, 100);
setTimeout(function() {
  debounceProcess('apple', 'banana');
}, 200);
setTimeout(function() {
  debounceProcess('apple', 'orange');
}, 300);
setTimeout(function() {
  debounceProcess('lime', 'kiwi');
}, 400);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/lodash/lodash/4.6.1/dist/lodash.min.js"></script>
2