Лодаш.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 очередь для каждой комбинации аргументов?
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>