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. 画像は既に読み込まれています。リッスンする load イベントはもうありません

これらのシナリオに関する詳細な説明と、Promise を使用してそれらを解決する方法については、以下のリンクを参照してください。

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

于 2014-03-10T09:10:03.813 に答える