JavaScriptで、処理内容の多い関数の出力が最後になるようにしたい(各関数を非同期で動作するようにしたい)

Question

実現したいこと

プログラムを実行すると

func1()が実行されました。
func2()が実行されました。i = 100000000
func3()が実行されました。

となります。func2()関数は処理内容が多いので、遅れて出力されるようにしたいです。
つまり、各関数が同期的に順番に実行されるのではなく、非同期的に、処理が早く終わった関数から出力されるようにしたいです。

発生している問題・分からないこと

それぞれの関数を非同期にして、早く終わった関数から出力されるような非同期処理の実装方法が分からない。

該当のソースコード

var func1 = async function(){
    console.log("func1()が実行されました。");
};

var func2 =  async function(){
    for(var i = 0, j = 0; i < 100000000; i++){
        j = i;
    }
    return new Promise((resolve) => {
        console.log("func2()が実行されました。i = " + i);
        resolve();
    });
};

var func3 = async function(){
    console.log("func3()が実行されました。");
};

(async () => {
    await func1();  // func1を待つ
    await func2();  // func2を待つ
    await func3();  // func3を待つ
})();

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

awaitを消したり、asyncを消したり試したが、ダメだった。

補足

特になし

Comments

[Lhankor_Mhy]

JavaScript の async/await は並列処理ではなくて、キューだということをご理解された方がいいと思います。
イベントやタイマーなども一見は割り込み処理のように見えますが、実態はキューです。

https://qiita.com/sho_U/items/f07a4f3e7760a9729f10

Answer 1

それぞれの関数を非同期にして、早く終わった関数から出力される

という仕様ならawaitをやめればいいだけでは？

const func1=()=>new Promise(resolve=>setTimeout(()=>(console.log(1),resolve()),100));
const func2=()=>new Promise(resolve=>setTimeout(()=>(console.log(2),resolve()),1000));
const func3=()=>new Promise(resolve=>setTimeout(()=>(console.log(3),resolve()),200));
func1();
func2();
func3();

※ちなみに負荷の高い処理は命題で言う大量のループ処理はそのまま回すのではなくwokerで処理をするのが懸命です

参考

workerでの処理

<script id="myWorker" type="javascript/worker">
const func=(n)=>{
  const t=new Date().getTime();
  const wait=300;
  while(new Date().getTime()<t+wait){
    void(0);
  }
  return n;
};
self.addEventListener('message',e=>{
  self.postMessage(func(e.data));
});
</script>
<script>
const blob = new Blob([document.querySelector('#myWorker').textContent]);
const worker = new Worker(window.URL.createObjectURL(blob));
worker.onmessage=e=>{
  console.log(e.data);
}
const func1=()=>new Promise(resolve=>setTimeout(()=>(console.log(1),resolve()),200));
const func2=()=>worker.postMessage(2);
const func3=()=>new Promise(resolve=>setTimeout(()=>(console.log(3),resolve()),100));
func1();
func2();
func3();
</script>

Comments

[juner]

元のコードの `j = i;` のあとに `await Promise.resolve()` でも入れて、エントリーポイントを待たなければよさげですね

Answer 2

async functionはそれだけで非同期関数です。
awaitを消せば実行を待たず(同期せず)処理されているはずです。

ほかの回答でPromise.allに触れている人がいますが、Promiseは関数の実行順序を制御するためのクラスで、質問とは関係がないので恐らく混乱します。

ちなみに、誤解されていると思いますが、setTimeoutは非同期処理をテストするためによく使われるもので、実際の重い処理をシュミレートするために使っていると思われます。

setTimeoutを使って「同期的｣に処理されているのであれば質問通り不具合が出ていて、「非同期的」に処理されているのであれば質問内容は解決しています。

※質問文に記載のあるコードは明らかにおかしいですが、promiseは今回不要であるため言及しません。

追記1

あとから出しゃばっておきながら、
JavaScriptがシングルスレッドだということを完全に漏らしていました。
他回答者さんの言う通り任意の処理を別スレッドで行いたい場合、wokerを使用するのが正しい解決方法になります。

文章がごちゃつきそうなので、元の回答はあえてそのままにしますが、要望があれば修正しますり

Comments

[juner]

async function 自体は 中で await されるまでは 同期的に実行されるので どこかで `await Promise.resolve()` でも挟めば非同期（キューを後に送ってくれる状態）になりますね。( thenable を await することで Promise.prototype.then() に相当する挙動をする為

[utm.]

ちょっと何言ってるか分からない

[juner]

次のコードは 1 2 3 4 5 6 の順番に実行されるってことです。

```js
console.log('1');

(async function() {
console.log('2');
await Promise.resolve();
console.log('4');
})();

Promise.resolve()
.then(() => console.log('5'));

queueMicrotask(() => console.log('6'));

console.log('3');
```

[utm.]

なるほど。JavaScriptがシングルスレッドであることを言いたかったのですね。
確かにそんな仕様がありました。忘れていました。
今回の例で言うと、先の回答者さんのあげている通りwokerを使用するのが適当という話になりますね。

回答に補足します。

Answer 3

非同期メソッドに於ける非同期範囲についての誤解がある様なので そのコードでは次の問題があります。

• Promise のコンストラクタ自体は同期的に実行される
• async function は await が入るまでは同期的に実行される
• await するとその完了を待ってしまう為他の await が実行されることはない

その為、func2 は次の様にすればあとに実行されます。
（※ await Promise.resolve() は setTimeout() ではなく queueMicrotask() なので 最小限の非同期となります（他の同期が優先されるだけならこれでよい

var func2 =  async function(){
    await Promise.resolve();
    for(var i = 0, j = 0; i < 100000000; i++){
        j = i;
    } 
    console.log("func2()が実行されました。i = " + i);
};

ただ、このままでは順番に実行されてしまうので並行実行する為に エントリーポイントを次の様に修正します

(async () => {
    await Promise.all([
        func1(),  // func1を待つ
        func2(),  // func2を待つ
        func3(),  // func3を待つ
    ]);
})();

以上の修正でうまくいくと思われます。

参考:

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve

https://developer.mozilla.org/ja/docs/Web/API/Window/queueMicrotask

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/async_function

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/then

追伸:

もしもそれぞれの func の先頭に await Promise.resolve() するのであれば func2 は次の様にした方がいいかもしれません。

var func2 =  async function(){
    await Promise.resolve();
    for(var i = 0, j = 0; i < 100000000; i++){
        j = i;
        await Promise.resolve();
    } 
    console.log("func2()が実行されました。i = " + i);
};

追伸2:

javascript のメインスレッドは シングルスレッドです。この方法は await でキューに分けることで 処理を分割して並行で動作している様に見える方法なので
もしも 完全並行処理を行いたいのであればウェブワーカー API をお試しください

https://developer.mozilla.org/ja/docs/Web/API/Worker

追伸3:

ウェブワーカーAPIを使ったコードも書いておきます。

var func1 = async function () {
  console.log("func1()が実行されました。");
};

var func2 = async function () {
  const source = `
globalThis.addEventListener('message', ({data}) => {
  for(var i = 0, j = 0; i < data; i++){
    j = i;
  }
  globalThis.postMessage(i);
})
`;

  const url = `data:text/javascript;base64,${btoa(source)}`;
  const {promise, resolve, reject} = Promise.withResolvers();
  const worker = new Worker(url);
  worker.addEventListener('error', reject);
  worker.addEventListener('messageerror', reject);
  worker.addEventListener('message', ({data}) => resolve(data));
  worker.postMessage(100000000);
  const i = await promise;
  return new Promise((resolve) => {
    console.log("func2()が実行されました。i = " + i);
    resolve();
  });
};

var func3 = async function () {
  console.log("func3()が実行されました。");
};
(async () => {
  await Promise.all([
    func1(), // func1を待つ
    func2(), // func2を待つ
    func3(), // func3を待つ
  ]);
})();

playground

Comments

[utm.]

Promise.allはプロミスを返します。制御しないのであれば無意味です

[juner]

元の await するニュアンスに合わせると Promise.all([]) を await した形でいいのでは？感あります。
事後処理が無かったにしても。

[utm.]

確かにそのようにも読解可能ですね笑

[tada_tadaa]

3種類のパターンを試してみました。

/****************①ここから ******************/
var func1 = async function () {
for(var i = 0, j = 0; i < 1000000000; i++){
j = i;
}
await Promise.resolve();
console.log("func1()の処理が終わりました");
};

var func2 = async function () {
for(var i = 0, j = 0; i < 100000000; i++){
j = i;
}
await Promise.resolve();
console.log("func2()の処理が終わりました");
};

var func3 = async function () {
for(var i = 0, j = 0; i < 1000000; i++){
j = i;
}
await Promise.resolve();
console.log("func3()の処理が終わりました");
};

(async () => {
await Promise.all([
func1(), // func1を待つ
func2(), // func2を待つ
func3(), // func3を待つ
]);
})();

/* 出力結果
func1()の処理が終わりました
func2()の処理が終わりました
func3()の処理が終わりました
*/
await Promise.resolve();を各関数に記述して試したら同期的に出力された。望んでいるのはawait Promise.resolve();を記述した関数だけが遅れて出力されるのではなく、処理が多い関数が遅れて出力されるのを希望している。
/****************①ここまで ******************/

/****************②ここから ******************/
var func1 = async function () {
return new Promise((resolve, reject)=>{
setTimeout(()=>resolve(), 3000);
})
};

var func2 = async function () {
return new Promise((resolve, reject)=>{
setTimeout(()=>resolve(), 1000);
})
};

var func3 = async function () {
return new Promise((resolve, reject)=>{
setTimeout(()=>resolve(), 100);
})
};

(async () => {
func1().then(()=>{console.log("1が終了")});
func2().then(()=>{console.log("2が終了")});
func3().then(()=>{console.log("3が終了")});
})();
/* 出力結果
3が終了
2が終了
1が終了
*/
//setTimeoutは別のスレッドで実行されるみたいな事を読んだ気がするので、うまく非同期で（処理が多い関数が遅れて出力される）実行されるのだろうか？
/****************②ここまで ******************/

/****************③ここから ******************/
var func1 = async function () {
return new Promise((resolve, reject)=>{
setTimeout(()=>{
for(var i = 0, j = 0; i < 1000000000; i++){
j = i;
}
resolve(i);
},10);
});
};

var func2 = async function () {
return new Promise((resolve, reject)=>{
setTimeout(()=>{
for(var i = 0, j = 0; i < 10000000; i++){
j = i;
}
resolve(i);
},10);
});
};

var func3 = async function () {
return new Promise((resolve, reject)=>{
setTimeout(()=>{
for(var i = 0, j = 0; i < 100000; i++){
j = i;
}
resolve(i);
},10);
});
};

(async () => {
func1().then(()=>{console.log("1が終了。")});
func2().then(()=>{console.log("2が終了。")});
func3().then(()=>{console.log("3が終了。")});
})();
/* 出力結果
1が終了。
2が終了。
3が終了。
*/
//②でsetTimeoutを用いたらうまく非同期で処理されたので、settimeout関数内に処理を書いたら、うまく非同期になるのかと思ったが、同期的（記述順）に出力された。
/****************③ここまで ******************

juner様が教えてくれた　await Promise.resolve()　を①のパターンで試してみたのですが、同期的に出力されました。やり方がおかしいのでしょうか？

[juner]

Promise を await すること ……つまり then() することは 以降の処理を queueMicrotask で後のタスクに追加するので `j = i` の後あたりに `await Promise.resolve()` すれば 回数多い方が最後になるのではないでしょうか？

[tada_tadaa]

juner様の追記された方法を試してみました。

/****************⑥ここから ******************/
var func1 = async function () {
await Promise.resolve();
for(var i = 0, j = 0; i < 100000000; i++){
j = i;
await Promise.resolve();
}
console.log("func1()の処理が終わりました");
};

var func2 = async function () {
await Promise.resolve();
for(var i = 0, j = 0; i < 1000000; i++){
j = i;
await Promise.resolve();
}
console.log("func2()の処理が終わりました");
};

var func3 = async function () {
await Promise.resolve();
for(var i = 0, j = 0; i < 10000; i++){
j = i;
await Promise.resolve();
}
console.log("func3()の処理が終わりました");
};

(async () => {
await Promise.all([
func1(), // func1を待つ
func2(), // func2を待つ
func3(), // func3を待つ
]);
})();

/* 出力結果
func3()の処理が終わりました
func2()の処理が終わりました
func1()の処理が終わりました
*/
/****************⑥ここまで ******************/
うまく非同期で出力されました。しかしより多くの複雑な処理を行う関数の場合に、処理の一つ一つにawait Promise.resolve();を記述していくのは大変です。もっと簡単な方法ないでしょうか？例えば j=i;の下にawait Promise.resolve();を記述しましたが、それをコメントアウトすると、また同期的に出力されます。その同期的に出力されるときに、func1の処理がしている間、func2とfunc3の出力はされません。と、いう事は、for文の上に記述したawait Promise.resolve();だけでは、非同期は実現できないという事です。j=i;の下にawait Promise.resolve();を書かないといけないのであれば、他のより多くの処理を行う複雑な関数であれば、一つ一つの処理文に、await Promise.resolve();を書かないといけないということになるような気がします。

[juner]

javascript の メインスレッドは シングルタスクなので そこに 分割したキューを流し込んでいる感じなので await Promise.resolve() で 現在の処理をキューに分割して積んでいる形となります。
一つの長い処理をそのまま実行してもそれは 他を押しのけて実行されるのでそれが実行されている間は他は動作しないです。

あと、 async function は 上記の通り 最初に await するまでは同期で、 await するとそこから awiat までがキューに分割される様なものなので、適当なタイミングで await Promise.resolve() することで 並行動作っぽく処理することができます。

もしも 完全並行処理を行いたいのであればウェブワーカー API をお試しください
https://developer.mozilla.org/ja/docs/Web/API/Worker

[utm.]

うまく非同期で処理されているように見えるのは単にループの数(というか、
await Promise.resolve();が呼ばれる数)が異なるからですけど、それで良いのでしょうか...？

await Promise.resolve();で処理を中断するのもナンセンスに見えるのですが。
Promise.resolveでなくてもなんのAPIでもいいことになりますが。

[juner]

Promise.resolve() をしたいのではなくて キューに分割したいなので( 敢えて言うなら .then() したいだけ queueMicrotask で後に回したいだけ（ setTimeout() だと UIまで巻き込むので時間がかかる為

[utm.]

はい。なので後に回したいなら、極論なんでもいいということになります(そう言ってます)。
そういった、ミスマッチなテクニックのための処理に関して
あなたはそれが適切な解決策だと考えているのでしょうか？分かり合えませんね。

アンチパターンにしか思えませんし、断りもなく推奨するのはあまり好ましくないように私は考えるまでです。

[juner]

ただし、 queueMicotask をするだけの為のできるだけコストの低いもののアプローチとなると Promise.resolve くらいしかないのが実状ではあります。

[juner]

await の仕様確認したら `await Promise.resolve()` でなくとも `await null;` でもほぼ同等ですね……。

https://tc39.es/ecma262/multipage/control-abstraction-objects.html#await

[tada_tadaa]

Lhankor_Mhy様が教えてくれた
https://qiita.com/sho_U/items/f07a4f3e7760a9729f10
でpromiseでの非同期な処理と言われるものの詳細を知ることができました。

本で読んだpromisの説明の中で非同期の図が描かれており、A,B,Cの処理があり、同期だとＡ→Ｂ→Ｃの順に処理するが非同期だとＢが処理している間にＣを処理する、みたいな説明で、僕はてっきりpromiseやasyncなどでそれが実現できるように勘違いしました。

さらにpromiseの利用例としてsetTimeoutが早く終わった順にpromiseのthenメソッドで続きの処理を実行している事から、setTimeoutの部分を別の処理に置き換えれば、同じように早く終わった処理から、thenメソッドで続きの処理を続行できるように勘違いしていました。

正確ではないと思いますが僕なりの理解では、Ａ、Ｂ、Ｃの処理を同時に実行し、早く終わったものから順に出力するというような事はpromiseやasyncでは実現できない。A,B,Cの処理を同時に実行するというのは並列処理であり、promiseやasyncにはそのような機能はない。javascriptはコールスタックというスタックに、処理する予定のモノ（関数とか）をどんどん積んでいきつつ処理していく。

https://www.jsv9000.app/

で、javascriptのプログラムでのコールスタック、タスクキュー、マイクロタスクキューに処理が追加されていく様子を目で見て確認できるので、より理解を深める事ができました。

コールスタックには関数単位で処理が積み重ねられていき、ある関数の処理をしているときに、同時に別の関数を処理するような並列処理の機能はない。（つまりjavascriptはシングルスレッド）
promiseの説明でよく用いられるsetTimeoutは早く時間が来た順に、setTimeoutの第一引数内の処理をスタックに追加していってるだけなので、スタックに積まれた順にsetTimeouの第一引数の処理を順番にこなしている。だからＡ，Ｂ，Ｃの処理で先に終了したものを出力するような事はできず、スタックに積まれた順に一つづつ処理していく事しかできない。

そして、例えば 複数のfetch()でURLを指定して、そのページのhtml文字列を取得するような場合、早くhtml文字列を取得できたものから順に次の処理に進むような場合、これは完全に非同期的な動きでありますが、このfetch()自体は、内部でワーカーを起動して、並列処理にしているようなので、それで非同期的な動作を実現しているようです。

だから、promiseやawaitで非同期（並列処理と言うべきか？）を実現できるわけではなく、処理が終わった事を知らせて次の処理に進めるような働きしかないと理解しました。

[tada_tadaa]

回答ありがとうございます。
試したところ問題が解決しました！
ベストアンサーに選ばせていただきました。

Answer 4

基本的には Promise.all([func1(), func2(), func3()]); でいいものですが、質問文の例だと func2() 実行中は他の処理がブロックされるので、質問文の例そのものでは期待通りに動かすことは不可能です。

func2()をたとえば以下のように変更すると試すことができるかと思います。

const func2 = () => {
  return new Promise(resolve => setTimeout(() => {
    console.log("func2()が実行されました。");
    resolve();
  }, 5000));
};

---

func1() func2() func3() の本来の処理内容に非同期なものが一切ない場合、それらを同時に処理を進めるには複数のスレッドが必要になります。ウェブワーカーを使うことになります。

具体的な処理内容がわかれば、また別の方法もあるかもしれません。

Comments

[tada_tadaa]

以下のように実行部分をコメントアウトして新しくPromise.allで試しました。

//(async () => {
// await func1(); // func1を待つ
// await func2(); // func2を待つ
// await func3(); // func3を待つ
//})();

Promise.all([func1(), func2(), func3()]);

しかしこれでもfunc2が最後に出力されるような事はなく、func1,func2,func3の順に出力されてます。
それから
int32_t様のsetTimeoutを使って出力されるのを遅くしている回答ですが、単純に処理内容が多い関数が、遅れてconsole.log()が出力されるようにしたいのです。setTimeoutを使って、出力のタイミングをずらすのは求めている回答ではないです。

[int32_t]

func2()の本来の処理内容に非同期なものがなく単純に重い処理なら、このアプローチでの解決は無理です。必要なのは非同期処理ではなく並列処理なので、ウェブワーカーが必要になります。

[juner]

async function は await が入るまでは同期なので `await Promise.resolve()` を入れてやればいいのではないでしょうか？
具体的には `j = i;` の後あたりに

[tada_tadaa]

func2()の処理内容に非同期なものがあればよいのでしょうか？具体的にどのように非同期なものを含めればよいのでしょうか？自分なりに以下の2パターンを試してみましたがうまく非同期になりませんでした。

/****************④ここから ******************/
var func1 = async function () {
new Promise((resolve, reject) => {
for(var i = 0, j = 0; i < 100000000; i++){
j = i;
}
resolve();
console.log("func1()の処理が終わりました");
})
};

var func2 = async function () {
new Promise((resolve, reject) => {
for(var i = 0, j = 0; i < 1000000; i++){
j = i;
}
resolve();
console.log("func2()の処理が終わりました");
})
};

var func3 = async function () {
new Promise((resolve, reject) => {
for(var i = 0, j = 0; i < 10000; i++){
j = i;
}
resolve();
console.log("func3()の処理が終わりました");
})
};

(async () => {
await Promise.all([
func1(), // func1を待つ
func2(), // func2を待つ
func3(), // func3を待つ
]);
})();

/* 出力結果
func1()の処理が終わりました
func2()の処理が終わりました
func3()の処理が終わりました
*/
/****************④ここまで ******************/

/****************⑤ここから ******************/
var func1b = async function () {
new Promise((resolve, reject) => {
for(var i = 0, j = 0; i < 1000000000; i++){
j = i;
}
resolve();
})
}

var func2b = async function () {
new Promise((resolve, reject) => {
for(var i = 0, j = 0; i < 100000; i++){
j = i;
}
resolve();
})
}

var func3b = async function () {
new Promise((resolve, reject) => {
for(var i = 0, j = 0; i < 10000; i++){
j = i;
}
resolve();
})
}

var func1 = async function () {
await func1b();
console.log("func1()の処理が終わりました");
};

var func2 = async function () {
await func2b();
console.log("func2()の処理が終わりました");
};

var func3 = async function () {
await func3b();
console.log("func3()の処理が終わりました");
};

(async () => {
await Promise.all([
func1(), // func1を待つ
func2(), // func2を待つ
func3(), // func3を待つ
]);
})();

/* 出力結果
func1()の処理が終わりました
func2()の処理が終わりました
func3()の処理が終わりました
*/
/****************⑤ここまで ******************/

非同期であればfunc3, func2, func1の順番でconsole.log()が出力されるはずですが、記述順に同期的に出力されました。

[juner]

javascript の メインスレッドは シングルスレッドなので 長々とした同期処理はそのまま実行されているので 注意です。

Promiseのコンストラクタは同期処理なので 非同期になりません。できるなら async function 上に書いて for の中で await Promise.resolve() してください

[int32_t]

「本来の処理内容」を具体的に書いたほうが的確な助言ができると思いますよ。「1000000000回ループを回す」が本当にしたいことではないですよね。

「本来の処理内容に非同期なものが」というのは、HTTPのレスポンス待ちのように「何か起きるまで待つ」処理があるという意味です。「1000000000回ループを回す」のように何も待つことがなくひたすら計算するものはワーカーを使わない限り同時実行はできません。

[juner]

処理の合間に await Promise.resolve() もしくは await new Promise(resolve => setTimeout(resolve)); を挟むことで 前者 は連続したキューとして区切り、 後者は 画面再描画を含めて区切り 実行できるので もっと await した方がよさそうですね。

[tada_tadaa]

＞「本来の処理内容に非同期なものが」というのは、HTTPのレスポンス待ちのように「何か起きるまで待つ」処理があるという意味です。「1000000000回ループを回す」のように何も待つことがなくひたすら計算するものはワーカーを使わない限り同時実行はできません。

HTTPのレスポンス待ちのようなものならうまくいく印象がありますが、HTTPのレスポンスだって、promiseとかを用いているのでは？であるならば、「1000000000回ループを回す」の処理だって、Promiseとか関数をうまく用いればHTTPのレスポンス待ちのようにうまく非同期が実現できそうな気がするのですが、ダメなのでしょうか？

[int32_t]

非同期処理を扱いやすく書くための手段がPromiseです。Promiseを使えば同期処理が非同期や並列処理になるわけではありません。

> うまく非同期が実現できそうな気がする

やりたいことは非同期処理ではなく並列処理ではありませんか?
依然として「本当にやりたいこと」が不明なので、的確な助言がしにくいです。

[maisumakun]

> Promiseとか関数をうまく用いればHTTPのレスポンス待ちのようにうまく非同期が実現できそうな気がするのですが、ダメなのでしょうか？

そうですね、その処理の「途中に」awaitを入れるなどの書き換えを行えるなら分割は可能です（が、すでに「それでは煩雑になる」とそのやり方は除外されていますよね？）。