javascript - 异步访问 DOM 元素而不挂起 UI

Question

我有一个很长的页面，网格中有 500 多行。还可以更多。 [数量]、[单价]和[总价]列相互连接。就像如果我添加数量 3 并添加价格 33，那么它会将 3 乘以 33，并将结果添加到总价格中。

当我的行数有限(例如 100 或 200)时，一切正常。当行数没有增长时，问题就会出现。例如 300 多行，然后浏览器会在 10 到 20 秒的时间内响应不良。

我在后台所做的是用 JavaScript 进行计算。我有一个简单的方法，它将在每行的文本框中运行焦点并计算其价格并将其放置在“总总计”字段中，然后调用另一个方法，该方法将通过获取所有行的总总计值来计算总计(如果行是 300 则它将一一处理所有 300 行)，然后在总计中添加值。

我认为我的计算方式是问题所在，它使浏览器的用户界面卡住了一段时间。有没有什么办法解决这一问题？喜欢异步？或者异步选取 DOM 元素而不挂起 UI？ BTY 使用 jQuery 获取和更新文本框中的值。

Answer 1

很久以前我也做过类似的事情。

答案很简单，只要不重新计算整个网格即可。您只需要跟踪增量即可。因此，如果当您输入值为 10 的文本框时总计为 100，并且它更改为 20，那么您就知道 grandtotal 的新值为 110，而无需重新计算所有内容 100 + (20 - 10)

grandTotal += (onExitValue - onEnterValue)