关于性能，最好的方法是什么:setInterval(）或body上的全局事件

What is a best approach regarding performance: setInterval() or a global event on body?

本文关键字：setInterval body 事件 全局 是什么 方法 于性能 性能      更新时间：2023-09-26

我在处理当前项目时遇到了这个问题。

我有一个表，里面有一堆可以由用户修改的数据。根据执行的修改，一系列框会更新它们显示的信息（预算计算、估计价格等）。

我想了两种方法来解决这个问题。

一种是使用setInterval函数。每隔半秒，读取表中所有数据以更新框的函数就会被触发。

第二种方法是将事件设置为整个页面：

$(document.body).on("keyup paste", function() {calculate();});

我想知道考虑到性能，这两种方法中哪一种是最好的方法。到目前为止，我会说第二个，因为不知何故，我对反复触发的函数的使用有偏见，但我对这件事的理解有点初级，我可能采取了错误的方法。

根据计算函数的复杂性，我认为第二个选项（关键事件触发器）可能很好。如果有很多计算在进行，那么你甚至可能想考虑混合使用密钥触发器和setTimeout，如下所示：

var keyTimeoutDelay;
$('body').on('keyup paste', function(){
  // Check if a timeout is set, and clear it if so...
  if(keyTimeoutDelay) clearTimeout( keyTimeoutDelay );
  // Set a timeout to delay the processing by 500ms.
  keyTimeoutDelay = setTimeout(function(){
    calculate();
  }, 500);
});
function calculate(){
  // Complex calculation stuff
}

此代码将在keyup事件和"粘贴"时运行，但仅当按键之间有500ms的延迟时才会调用calculate（）函数。你可以通过用手指在键盘上的所有键上移动来尝试它-calculate（）方法只有在你停止"键入"时才会被调用

您可以尝试使用javascript debounce函数。http://davidwalsh.name/javascript-debounce-function

$(document.body).on("keyup paste", debounce(function() {calculate();}, 100) );

您应该使用事件处理程序/侦听器。当数据没有更改时，没有必要重新计算数据——这是浏览器正在做的不必要的工作。但它当然不一定要在整个身体上。您可以根据用户与特定元素（您所指的框）的交互方式触发事件，而不是根据用户与整个页面的交互方式来触发事件。

例如，我假设您使用<input>字段：您可以使用jQuery将"input"事件绑定到每个字段，并在每次触发时运行计算函数。有关更多详细信息，请参阅此处的各种问题答案。

在某些情况下，将事件处理程序附加到主体可能很有用，但对于您的情况，这似乎只会增加不必要的开销。

MDN在现代浏览器中有一个关于事件侦听器的页面——jQuery也不是绝对必要的。

相关文章：