Lodash _.debounce具有用于唯一参数变体的单独队列

Question

我非常感谢lodash的去抖和油门功能.我相信我很好地理解了用例并且已经实现了几十次.

但是,根据要求,带有参数的_.debounce函数可能存在重大且难以捕获的错误.这是以下内容:

假设您有一个调用去抖函数debounceFn,该函数接受一个参数并且具有1000ms的去抖动间隔.

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

子函数最终将使用1的参数调用.这对于仅关注最后一个值的resize事件非常有用,但如果根据参数需要单独的debounced队列,该怎么办？也就是说,不是使用参数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>

我在_.debounce接受了一个论点时看到过很多SO问题.这不再是一个有趣的问题,所以 - 你如何创建单独的去抖队列？

使用Lodash _.debounce函数,Lodash库和JavaScript本机功能来实现这一目标的优雅方式(简单易读的代码)是什么？也许_.debounce和_.memoize的组合(我已经尝试用_.memoize包装_.debounce但是需要探索以进一步理解memoize).或者也许是一个'散列'参数并为每个参数组合创建一个新的_.debounce队列的函数？

Answer 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>