javascript - 下划线 _.throttle 如果在超时内发生模糊则忽略输入

Question

我有一个 meteor 事件，它监视一组字段的变化，并相应地更新数据库。为了提高效率(如果误导请纠正我)，我为该事件添加了一个限制，以便它最多每秒触发一次。

事件:

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 字段，看到数据库中的值返回为“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。但是，如果您切换到电子邮件字段并足够快地在其中输入一些字符(例如“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);
    } 
});