在Meteor JS中更改输入字段值时执行Update调用的最佳方法？

Question

假设示例 - 您有一个"项目"集合,其中每个项目都有一个存储在数据库中的数量和价格.

该数量是输入字段.

我们希望在数量改变时更新数据库 - 没有"提交"按钮.有多种方法可以解决这个问题.两个例子:

1. 在"已更改"上更新数据库:

   'change input.qty': function (evt) {
       var qty = $(evt.target).val();
       if (qty==null){
           qty=0;
       };
       Items.update(this._id,{$set:{quantity: Number(qty)}});
   },
   

2. 更新"keyup"上的数据库:

   'keyup input.qty': function (evt) {
       var qty = $(evt.target).val();
       if (qty==null){
           qty=0;
       };
       Items.update(this._id,{$set:{quantity: Number(qty)}});
   },
   

1更有效 - 它只在用户点击输入框外部后执行一次更新调用.但是,这是一种更糟糕的用户体验,因为更新不会在页面输入时反映出来.(例如,假设"价格"字段是根据您的输入数量反应计算的)

2是一个更好的用户体验,但效率极低(即输入103.58使得FIVE数据库调用)

有更好的选择还是良好的中间立场？

Answer 1

这_.throttle就是创建方法的确切情况.

'keyup input.qty': _.throttle(function (evt) {
  ...
}, 350),

当您以_.throttle这种方式包装处理程序时,即使输入更频繁地更改,它也将按给定的毫秒数调用一次.

350 在大多数情况下,它是一个很好的值,但确切的最佳值可能取决于您正在设计的界面.