Underscores _.throttle 如果在超时内发生模糊则忽略输入

Question

我有一个流星事件，它监视一组字段的变化，并相应地更新数据库。为了效率起见（如果被误导请纠正我）我给事件添加了一个节流阀，这样它最多只会每秒触发一次。

事件：

Template.TheForm.events({
  "input #TheForm .field": _.throttle(function (event) {
    // Update field
    Meteor.call("updateForm", this._id, event.target.name, event.target.value, function(error, result){
      // Do someting here
    });
  }, 1000) // Throttle to fire at most once every second
});

形式:

<form id="TheForm">
  <fieldset id="person">
    <legend>The person</legend>
    <label for="name">Name</label>
    <input id="name" type="text" name="name" class="field" value="{{ name }}" />
    <label for="email">Email</label>
    <input id="email" type="email" name="email" class="field" value="{{ email }}" />
  </fieldset>
</form>

问题是，如果我填充一个字段并在 1000 毫秒超时内将其模糊掉，似乎只有第一个字符被选中，即

'Nathan' 快速输入 name 字段并模糊输入 email 字段看到数据库中的值 return 为 'N'。

我的理解是 ._throttle 函数会获取字段值的最终结果 - 即使这意味着要在 1 秒后收集它。

来自docs：

By default, throttle will execute the function as soon as you call it for the first time, and, if you call it again any number of times during the wait period, as soon as that period is over. If you'd like to disable the leading-edge call, pass {leading: false}, and if you'd like to disable the execution on the trailing-edge, pass {trailing: false}.

主要逻辑似乎工作正常，因此最初的 'N'，但是我没有调用 trailing: false 所以除非我误解了最终值应该总是被收集。

有什么想法吗？

Answer 1

您的两个字段都使用相同的事件处理程序，因此如果第二个字段在 1 秒内触发一个事件，则第一个字段中的某些事件将被抑制。如果您在 1 秒内在 name 字段中键入 "Nathan"，您的处理程序将被调用 name=N，然后在 1 秒后调用 name=Nathan。但是，如果您切换到 email 字段并在其中足够快地键入一些字符（比如 "nathan@e"），那么这些事件将导致 name=Nathan 事件被抑制。在这种情况下，您将立即获得 name=N 并在 1 秒后获得 email=nathan@e。

因此，解决方案是为每个输入字段设置一个单独的节流事件处理程序。您不必多次复制粘贴事件处理程序 - 您可以使用如下方法：

var throttledFunctions = {};
["name", "email"].forEach(function (fieldName) {
    throttledFunctions[fieldName] = _.throttle(function (context, event) {
        Meteor.call("updateForm", context._id, event.target.name, event.target.value, ...)
    }, 1000);
});

Template.TheForm.events({
    "input #TheForm .field": function (event) {
        throttledFunctions[event.target.name](this, event);
    } 
});

Underscores _.throttle 如果在超时内发生模糊则忽略输入

Underscores _.throttle ignoring input if blur occurs within the timeout

javascript

underscore.js

meteor