具有多个共享同一事件侦听器的输入的去抖动事件

Question

我正在对多个输入应用去抖动事件。我如何只去抖动来自相同输入的变化。例如，我有两个输入 html 通过循环渲染。唯一可用的标识符是来自数据库的 data-id。

<input data-id="1" />
<input data-id="2" />

其中 data-id 是动态的，并使用循环呈现。所以我将 ajax 附加到输入 keyup，并希望对它们进行去抖动，这样它就不会在用户键入时触发数千次。这是我的 javascript:

$(document).on('keyup', '[data-id]', _.debounce(function () {
    // Ajax here
    $.post('/some_url', { some_data })
}, 1000);

现在这似乎有效，而且确实去抖动了。但问题是去抖动事件不区分两个输入。因此，如果我更改第一个输入并立即开始更改第二个输入，只要我足够快，第一个输入上的 keyup 事件就不会触发。

我想知道如何区分每个 <input> 上的反跳。

Answer 1

使用 each 遍历输入，因此您可以为每个输入调用 _.debounce：

$('[data-id]').each(function() {
  $(this).on('keyup', _.debounce(function () {
    // ...

Debounce event with multiple inputs that share the same event listener