javascript - プログラミング行が完了するまで待機し、javascript で次の行に移動するように関数を作成するにはどうすればよいですか?

Question

Javascript を使用して HTML5 を作成していますが、現在の行が終了する前にコードが次の行のステートメントを実行することがあります。

たとえば、Javascript でオブジェクトに画像を渡していますが、オブジェクトが画像を持つ前に次のステートメントが既に実行されているため、オブジェクトに画像がない場合もありますが、ある場合もあります。

したがって、2行の間にコールバックまたは待機関数などを割り当てる必要がありますが、方法がわかりません

var image=new Image();
ws.send("complete");

score 5 · Accepted Answer

Javascriptは（ほとんど）非同期です。これは良いことです。たとえば、画像を待っている間はUIをブロックしたくありません。

イメージが完了した後にws.sendを実行するには、以下を使用します。

var image = new Image();
image.onload = function()
{
 ws.send("complete");
}
image.src = 'image.jpg';

この同期を行うと、プログラム全体がブロックされ、それは望ましくありません。

コールバックに関しては、関数を引数として関数に渡すことができます。例えば：

function doSomething(callback)
{       
    callback();
}

doSomething(function()
{
 console.log('im done!');
});

score 1 · Accepted Answer

質問が画像固有であるかどうかはわかりませんが、画像の場合は、次の操作を実行できます。画像が読み込まれると、onloadイベントが発生します。

var im = new Image();
im.onload = function() { ws.send('complete'); }
im.src = 'path/to/image.jpg'

score 0 · Accepted Answer

これを見てください：Javascript image onload

基本的に、画像が読み込まれたときにイベントをキャッチするイベントリスナーを作成する必要があります。

3 に答える 3