適当な関数

sync.js

function fx() {
    
    const a = 100 * 300;
    console.log('時間です');
  
    const ret = 'abc';
    
    let aa = [];
    for (let i = 0; i < 100; i++) {
      aa.push(i);
    }
  
    console.log(ret);
  
    const ret2 = 1000;
    
    const a2 = 'abc';
    let x = a2 + 'xyz';
    console.log(ret, ret2);

    
}

fx();
fx();

結果は

時間です
abc
abc 1000
時間です
abc
abc 1000

同期的に動いている。

async.js

async function fx() {
    await Promise.resolve();  //ここで非同期

    const a = 100 * 300;
    console.log('時間です');
  
    await Promise.resolve(); //ここで非同期

    const ret = 'abc';
    let aa = [];
    for (let i = 0; i < 100; i++) {
      aa.push(i);
    }
  
    console.log(ret);
  
    await Promise.resolve(); //ここで非同期

    const ret2 = 1000;
    const a2 = 'abc';
    let x = a2 + 'xyz';
    console.log(ret, ret2);

    
}

fx();
fx();

functionの前にasyncをいれ、ブレークするところにawait Promise.resolve();をいれる。

結果は

時間です
時間です
abc
abc
abc 1000
abc 1000

非同期になった。
ブレークしたところで、処理が切り替わる。

ちなみに

async.js

function delay() {
    return new Promise(resolve => setTimeout(resolve, 0));
  }


async function fx() {
    await delay();  //ここで非同期

    const a = 100 * 300;
    console.log('時間です');
  
    await delay(); //ここで非同期

    const ret = 'abc';
    let aa = [];
    for (let i = 0; i < 100; i++) {
      aa.push(i);
    }
  
    console.log(ret);
  
    await delay(); //ここで非同期

    const ret2 = 1000;
    const a2 = 'abc';
    let x = a2 + 'xyz';
    console.log(ret, ret2);

    
}

fx();
fx();

このようにsetTimeoutをPromiseにくるんで渡してもよい。

delay.js

function delay() {
  return new Promise(resolve => setImmediate(resolve));
}

setImmdiateでもOK

Promise.resolveとsetImmediateの違い

Promise.resolve()はMicrotask Queueにタスクを追加する
setImmediate()はTask Queueにタスクを追加する

このため、Promise.resolve()の方が優先的に実行される

非同期関数から返り値を戻す場合

async.js

async function fx() {
    await Promise.resolve();  //ここで非同期

    return '終わったよ'

}
    
    
fx().then(ret => {
    console.log(ret);
});

retuenで返して、thenで受け取る。
fx()はPromiseを返すから。

async.js

async function fx() {
    await Promise.resolve();  //ここで非同期

    return '終わったよ'

}
    

(async () => {
    const ret = await fx(); 
    console.log(ret);
})();

asyncで書き換えてもOK。

長いループを非同期にする場合

loop.js

async function processAll() {
  const totalIterations = 510;
  const batchSize = 100;

  
  for (let i = 0; i < totalIterations; i += batchSize) {
      const start = i;
      const end = Math.min(i + batchSize, totalIterations); // 最後のバッチが100回未満の場合に対応

      await (async() => {
          console.log(`処理中: ${start}`);

          for (let i = start; i < end; i++) {
          
              // ここで実際の処理を行う（例: API 呼び出し、データ処理など）
          
          }
          await Promise.resolve();

      })();

      
  }

  console.log('すべての処理が完了しました');
}

processAll();
processAll();

100回ループするごとにブレークして非同期にループする。

処理中: 0
処理中: 0
処理中: 100
処理中: 100
処理中: 200
処理中: 200
処理中: 300
処理中: 300
処理中: 400
処理中: 400
処理中: 500
処理中: 500
すべての処理が完了しました
すべての処理が完了しました

内部のループを関数にしてもいい

loop.js

async function processBatch(start, end) {
    console.log(`処理中: ${start}`);

    for (let i = start; i < end; i++) {
      
      // ここで実際の処理を行う（例: API 呼び出し、データ処理など）
      
    }
    await Promise.resolve();
}
  

async function processAll() {
    const totalIterations = 510;
    const batchSize = 100;

    
    for (let i = 0; i < totalIterations; i += batchSize) {
        const start = i;
        const end = Math.min(i + batchSize, totalIterations); // 最後のバッチが100回未満の場合に対応

        await processBatch(start, end);


    }
  
    console.log('すべての処理が完了しました');
}
  
processAll();
processAll();

以上