javascript - 为什么这段代码不同步执行？

Question

我的印象是所有 DOM 操作都是同步的。

但是，这段代码并没有按照我的预期运行。

RecordManager.prototype._instantiateNewRecord = function(node) {
  this.beginLoad(); 
  var new_record = new Record(node.data.fields, this);
  this.endLoad();
};
RecordManager.prototype.beginLoad = function() {
  $(this.loader).removeClass('hidden');
};
RecordManager.prototype.endLoad = function() {
  $(this.loader).addClass('hidden');
};

Record 构造函数非常大，它涉及实例化一大堆 Field 对象，每个对象实例化自己的一些其他对象。

这会导致 1-2 秒的延迟，我希望在此延迟期间有一个加载图标，因此它不仅仅是看起来页面卡住了。

<小时/>

我预计事件的流程是:

• 显示加载图标
• 执行记录实例化操作
• 隐藏加载图标

除了流程最终是:

• 执行记录实例化操作
• 显示加载图标
• 隐藏加载图标

<小时/>

所以，你根本看不到加载图标，我只知道它的加载情况，因为 chrome 开发工具 DOM 查看器的更新有点滞后。

我应该期待我的代码出现这种行为吗？如果是这样，为什么？

Answer 1

是的，这是可以预料的。尽管 DOM 可能已更新，但在浏览器有机会重新绘制之前，您不会看到它。重绘将以与浏览器中所有其他事物排队相同的方式排队(即，直到当前 JavaScript block 执行完毕后才会发生)，尽管在调试器中暂停通常会允许它发生。

就您的情况而言，您可以使用 setTimeout 立即超时来修复它:

RecordManager.prototype._instantiateNewRecord = function(node) {
  this.beginLoad(); 
  setTimeout(function() {
    var new_record = new Record(node.data.fields, this);
    this.endLoad();
  }, 0);
};

这将允许在执行代码的下一部分之前进行重绘。