[解決済み] JavaScriptでawaitを使わない非同期関数
2023-02-21 15:06:20
質問
2つの関数があります。
a
と
b
がある場合、前者は非同期、後者は
await
がなく、後者は
await
. どちらもコンソールに何かを記録し
undefined
. どちらかの関数を呼び出した後、別のメッセージを記録し、そのメッセージが関数本体の実行の前か後かに書かれているかどうかを調べます。
function someMath() {
for (let i = 0; i < 9000000; i++) { Math.sqrt(i**5) }
}
function timeout(n) {
return new Promise(cb => setTimeout(cb, n))
}
// ------------------------------------------------- a (no await)
async function a() {
someMath()
console.log('in a (no await)')
}
// ---------------------------------------------------- b (await)
async function b() {
await timeout(100)
console.log('in b (await)')
}
clear.onclick = console.clear
aButton.onclick = function() {
console.log('clicked on a button')
a()
console.log('after a (no await) call')
}
bButton.onclick = function() {
console.log('clicked on b button')
b()
console.log('after b (await) call')
}
<button id="aButton">test without await (a)</button>
<button id="bButton">test with await (b)</button>
<button id="clear">clear console</button>
を使わずにテストを起動した場合
await
を付けずにテストを起動すると、この関数は同期的に動作するように見えます。しかし
await
では、メッセージは
反転
であり、関数は非同期で実行されます。
JavaScriptはどのようにして
async
関数がない場合
await
というキーワードがない場合、どのように機能するのでしょうか?
実際の使用例です。
私は
await
キーワードがあり、条件付きで実行されます。そして、私の要素をレンダリングするために、関数が同期的に実行されるかどうかを知る必要があります。
async function initializeComponent(stuff) {
if (stuff === undefined)
stuff = await getStuff()
// Initialize
if (/* Context has been blocked */)
renderComponent() // Render again if stuff had to be loaded
}
initializeComponent()
renderComponent()
追伸:他の言語での同じ質問との混同を避けるため、タイトルにはJavaScriptのキーワードがあります(すなわち awaitなしでasyncを使用する )
どのように解決するのですか?
非同期関数 は はawait式を含んでいます。 非同期関数の実行を一時停止し、渡されたPromiseの解決を待ちます。 の解決を待ち、その後、非同期関数の実行を再開し、解決された値を返す。 解決された値を返します。
想定していた通り、awaitが存在しない場合、実行は一時停止されず、その後コードはノンブロッキングで実行されることになります。
関連
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] forEachループでasync/awaitを使用する
-
[解決済み] async」と「await」の使い方とタイミング
-
[解決済み】JavaScriptの比較では、どちらの等号演算子(== vs ===)を使うべきですか?
-
[解決済み】オブジェクトからプロパティを削除する(JavaScript)
-
[解決済み] JavaScriptで次の要素/前の要素を取得しますか?
-
[解決済み] なぜJavaScriptでは!{}[true]がtrueに評価されるのですか?
-
[解決済み] Javascript の parseInt() で先頭のゼロを削除する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] JavaScript で範囲を作成する - 奇妙な構文
-
[解決済み] bootstrap のポップオーバーがすべての要素の上に表示されない
-
[解決済み] React js 親コンポーネントから子コンポーネントの状態を変更する
-
[解決済み] Javascriptで動的に命名されたメソッドを呼び出すにはどうすればよいですか?
-
[解決済み] TypeScriptプロジェクトで既存のC#クラス定義を再利用する方法
-
[解決済み] Reactメモを使うべきではない場合とは?
-
[解決済み] $.ajax実行中にローディングイメージを表示する
-
[解決済み] CORS: 認証モードは 'include' です。
-
[解決済み] JSHintの'+'前の改行不良の説明
-
[解決済み] 変異を伴わないオブジェクトからの値の削除