JavaScript非同期処理の完全ガイド：基本から応用まで

<button onclick="startTasks()">処理を開始</button>
<div id="output"></div>

// ボタンを押したら開始する処理
function startTasks() {
    updateOutput("処理命令開始");
    task1();
    task2();
    updateOutput("処理命令終了");
}

// 500ミリ秒遅延する処理
function task1() {
    setTimeout(() => {
        updateOutput("タスク1完了");
    }, 500);
}

// 100ミリ遅延する処理
function task2() {
    setTimeout(() => {
        updateOutput("タスク2完了");
    }, 100);
}

// テキストを画面に表示する処理
function updateOutput(message) {
    const output = document.getElementById('output');
    output.innerHTML += '<p>' + message + '</p>';
}

// ボタンを押したら開始する処理
function startTasks() {
    updateOutput("処理命令開始");
    task1(() => {
        task2(() => {
            updateOutput("処理命令終了");
        });
    });
}

// 500ミリ秒遅延する処理
function task1(callback) {
    setTimeout(() => {
        updateOutput("タスク1完了");
        callback();  // ここでtask2を呼び出します
    }, 500);
}

// 100ミリ秒遅延する処理
function task2(callback) {
    setTimeout(() => {
        updateOutput("タスク2完了");
        callback();  // コールバックを呼び出して「処理命令終了」が表示されるようにします
    }, 100);
}

// テキストを画面に表示する処理
function updateOutput(message) {
    const output = document.getElementById('output');
    output.innerHTML += '<p>' + message + '</p>';
}

// ボタンを押したら開始する処理
function startTasks() {

    updateOutput("処理命令開始");

    // task1を実行して、Promiseが解決されるのを待ちます。
    task1().then(() => {
        // task1が完了したら、task2を実行します。
        // task2もPromiseを返すので、これが解決されるのを待ちます。
        return task2();
    }).then(() => {
        // task2の完了後、最終的に「処理命令終了」を表示します。
        updateOutput("処理命令終了");
    });
}

// 500ミリ秒遅延する処理
function task1() {
// return new Promise(resolve => {...}) - この行は新しいPromiseオブジェクトを生成して返します。
// resolveは、Promiseが成功したときに呼び出す関数です。
    return new Promise(resolve => {
        setTimeout(() => {
            updateOutput("タスク1完了");
            resolve();
        }, 500);
    });
}

// 100ミリ遅延する処理
function task2() {
    return new Promise(resolve => {
        setTimeout(() => {
            updateOutput("タスク2完了");
            resolve();
        }, 100);
    });
}

function updateOutput(message) {
    const output = document.getElementById('output');
    output.innerHTML += '<p>' + message + '</p>';
}

// ボタンを押したら開始する処理
async function startTasks() {
    // 処理の開始を示すメッセージを出力
    updateOutput("処理命令開始");
    await task1(); // task1の完了を待つ
    await task2(); // task1の完了後にtask2の完了を待つ
    updateOutput("処理命令終了"); // すべてのタスクが完了したことを示すメッセージを出力
}

// 500ミリ秒遅延する処理
function task1() {
    return new Promise(resolve => {
        setTimeout(() => {
            updateOutput("タスク1完了");
            resolve(); // Promiseを解決してtask1の終了を示す
        }, 500);
    });
}

// 100ミリ遅延する処理
function task2() {
    return new Promise(resolve => {
        setTimeout(() => {
            updateOutput("タスク2完了");
            resolve(); // Promiseを解決してtask2の終了を示す
        }, 100);
    });
}

function updateOutput(message) {
    const output = document.getElementById('output');
    output.innerHTML += '<p>' + message + '</p>';
}