2

我在下面有一个图像事件处理代码

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Promise DEMO</title>    
</head>
<body>
<img src="someImagePath.jpg" class="img-1"/>
</body>
</html>

JavaScript

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

img1.addEventListener('load', function() {
  // woo yey image loaded
});

img1.addEventListener('error', function() {
  // argh everything's broken
});

会是什么情况，在我开始收听事件之前可能会发生这些事件？

目的是理解为什么我应该使用 Promise。

4

1 回答 1

1

一般来说，javascript 中的事件（包括 DOM 更改）是完全异步的，因此将侦听器绑定到对象的时间点可以在事件发生之前或之后发生。

简单的例子：

  1. 浏览器开始构建文档
  2. 找到并放置在 DOM 流中的图像标签
  3. 后台下载图片源
  4. 找到 Javascript，开始执行
  5. 图片源已加载
  6. 找到 Javascript 事件侦听器绑定
  7. 图像已加载，无需再收听加载事件

关于这些场景以及如何使用 Promise 解决它们的更详细的解释可以在下面的链接中找到：

http://www.html5rocks.com/en/tutorials/es6/promises/

于 2014-03-10T09:10:03.813 回答