javascript - 在触发多个更改时仅运行一次昂贵的代码

Question

我有一些输入对象。

我有一个代码可以在它们发生变化时执行某些操作 -

for (var i=0; i<100; ++i)
  my_inputs[i].on('change', function() {
    showValue($(this).val());  // Display the value it changed to
    someExpensiveOperation();  // A common refresh for any change
  });

我想将它们全部重置为 0。

for (var i=0; i<100; ++i) {
  my_inputs[i].val(0);
  my_inputs[i].change();  // Calls someExpensiveOperation 100 times!
}

重新设计代码以防止在手动重置值时调用刷新的好方法是什么？ promises/deferred 在这里有帮助吗？

Answer 1

您可以消除对 someExpensiveOperation() 的调用:

 var someExpensiveOperationDebouncing = 0;

 function debouncedSomeExpensiveOperation() {
     if (someExpensiveOperationDebouncing) {
         return;
     }

     // wait at least 1/4 second before calling someExpensiveOperation again
     ++someExpensiveOperationDebouncing;
     setTimeout(function () {
         --someExpensiveOperationDebouncing;
     }, 250); 

     someExpensiveOperation.apply(this, arguments);
 }

另请查看 lodash 的 _.debounce(func, [wait], [options]) .