Logging

demo23、javascriptの非同期同期処理?

今日はJavaScriptで非同期、同期処理のことに付いて考えてみた。関数を呼び出して返却の値を変数に渡す処理を作って頂けると非同期処理と同期処理の違いがわかるかと思います。例えばこういうJSの処理があるとします。

document.getElementById("btn").addEventListener("click", async (e) => {
	test1();
	test2();
	test3();
	await test1();
	await test2();
	await test3();
});

function test1() {
	return new Promise(resolve => {
		setTimeout(() => {
			console.log("btn = 1");
			resolve('1');
		}, 3000);
	});
}
function test2() {
	return new Promise(resolve => {
		setTimeout(() => {
			console.log("btn = 2");
			resolve('2');
		}, 2000);
	});
}
async function test3() {
	return new Promise(resolve => {
		setTimeout(() => {
			console.log("btn = 3");
			resolve('3');
		}, 100);
	});
}

こちらの処理を試すと結果、このような内容がデバックモードで表示されます。予想通りの結果が返ってきましたか?それとも予想外の結果が返ってきましたか?

asyncが付いていてawaitがついてない場合とついている場合とでは違いの差がわかるかと思います。いろいろと試してみると非同期処理の応用が出来るかと思います、逆に言えば上手く非同期処理を使いこなすことが出来るとコードが短縮出来たり、効率的に回せるのではないかと思います。自分もこれらを使っていろいろと作ってみたいですね(´Д`)。因みに今回、Promiseを簡略化したパターンでコードを書いています。

尚、Demo23にはデモコードが存在しますので動作を検証してみてください。
https://zip358.com/tool/demo23/







    マウスの動きをトラッキング(追跡)する。前のページ

    映画、記者たち 衝撃と畏怖(いふ)の真実を観ました。次のページ

    関連記事

    1. Logging

      PHPとVS2015をJSONで連携する。

      Imports System.NetPublic Class Fo…

    2. Logging

      @夢

      「いつまで夢みたいなことを言っているだ」と嘆かられることだろう。た…

    3. Logging

      映画、9人の翻訳家囚われたベストセラー #映画レビュー

      おはようございます、秋らしい秋の陽気が続きます🫠。さて、今日…

    4. Logging

      「2030年世界はこう変わる」をパラ読みして。

      「2030年世界はこう変わる」をパラ読みしてこう変わるじゃなくて、こ…

    5. Logging

      日本語を点字に変換する機械?ツールを作りましたよ。人の役に立つかは??

      昨日は寝苦しい夜でして寝たり起きたりを繰り返しました。本日は熟睡でき…

    6. Logging

      WordPressのGutenbergを試してみた。

      WordPressのGutenbergを試してみた。試してみた結果、…

    2020年11月
     1
    2345678
    9101112131415
    16171819202122
    23242526272829
    30  

    カテゴリー

    アーカイブ

    PAGE TOP