Question

JavaScript 是单线程的，这意味着任何两块脚本都不能同时执行，它们必须要按照一定的秩序来运行。在浏览器环境下，JavaScript 和其他浏览器任务共享同一线程。尽管浏览器之间有差异，但是一般情况下这些同 JavaScript 共享线程的任务包括了界面绘制、样式更新和用户操作处理（如文本高亮、表单交互等）。上述所有操作在执行的过程中都会阻塞其他任务。

但是在日常生活中，我们通常是用多线程的思维来生活的。打字时可以多个手指同时操作，开车时可以同时打电话。我们生活中唯一的阻塞事件可能就是打喷嚏了，因为打喷嚏时其他所有进行中的活动都必须要暂停执行。这很烦人，不是吗？尤其是你在开车打电话的时候。是的，我们都不喜欢写这种类似“打喷嚏”的代码。

你可能经常会使用事件和回调写出如下的代码：

var img1 = document.querySelector('.img-1');

img1.addEventListener('load', function() {
  // 图片加载完成


});

img1.addEventListener('error', function() {
  // 出问题了


});

上面的代码一定不会有类似“打喷嚏”的状况发生。我们查找图片并给它添加了两个监听函数，然后 JavaScript 就停止执行了，直到监听函数被触发才会再次执行。

但是非常不幸的是，上面的示例代码是有问题的。因为有些时候图片的相关事件会在监听函数设置之前就已经执行过了，所以我们需要使用图片的“complete”属性来修补上述代码的问题：

var img1 = document.querySelector('.img-1');

function loaded() {
  // 图片加载完成


}

if (img1.complete) {
  loaded();
}
else {
  img1.addEventListener('load', loaded);
}

img1.addEventListener('error', function() {
  // 出问题了


});

上面的代码依然存在问题，对于在监听前就发生图片错误的情况，我们依然无法解决，而且 DOM 也没有提供相关的办法来解决这个问题。这还只是加载一张图片的情况，当有一堆图片需要处理时情况会变得更加复杂。