JavaScriptスリープメソッドが存在しない：代わりに何を使用するか

さまざまなプログラミング言語を使用しているエンジニアまたは開発者の場合は、sleep()というネイティブメソッドを使用した可能性があります。 メソッドの実行を停止または一時停止します。 JavaScriptにはそのようなネイティブメソッドはありません。

この記事では、JavaScriptを使用してスリープ関数をシミュレートする2つの異なる方法、Promises関数とasync/await関数について説明します。

非同期関数の概要

最初にsetTimeout()に言及せずに、JavaScriptのPromisesまたはasync/await関数について説明するべきではありません。 簡単に方法。このメソッドは、JavaScriptでPromisesが必要な理由を示します。

JavaScriptはシングルスレッドです

JavaScriptがシングルスレッド言語であると言うとき、JavaScriptには1つの呼び出しスタックと1つのメモリヒープしかないということです。大まかに言うと、これはJavaScriptがコードを一度に1行ずつ順番に読み取り、次の行に移動する前にコードの一部を実行する必要があることを意味します。これにより、JavaScriptは本質的に同期化されます。コードを非同期にするために、回避策が必要になる場合があります。

同期コードと非同期コード

この例を見てください。

//synchronous
console.log("This will print first")
console.log("This will print second")
console.log("This will print third");

かなり簡単ですよね？ JavaScriptが連続して実行するため、各console.logは連続して出力されます。

2行目を3行目の前に印刷したいとしますか？そのconsole.logを基本的にどのように印刷できますか 順番がずれていますか？ setTimeout()でそれを行うことができます ：

//setTimeout
console.log("This will print first")
 
setTimeout(() => {
console.log("This will print third")
}, 1000);
 
console.log("This will print second");

setTimeout() スレッドをブロックせずにJavaScript関数を実行できるため、他のコードを実行できます。最初の引数は、設定された時間が経過した後に実行されるコールバック関数です（2番目の引数）。 2番目の引数は、ミリ秒単位で表されます。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

このsetTimeout() メソッドは、次の方法で他の言語でネイティブなスリープメソッドを模倣します。

1. JavaScriptエンジンがsetTimeout()を実行するときにバックグラウンドでタイマーを設定する 機能
2. タイマーがカウントダウンを実行している間、他のコードを実行し続ける
3. setTimeout()でコールバック関数を実行する タイマーがゼロに達したとき。

setTimeout()の方法を理解する Promisesとasync/await関数がどのように機能するかを理解するには、動作が不可欠です。次の約束について説明します。

約束

約束の作成

Promiseは、非同期ロジックを実行する方法です。 Promiseコンストラクターは、resolveとrejectの2つのパラメーターを持つコールバック関数を受け取ります。このコールバック関数には、終了すると、渡された応答を使用して解決関数または拒否関数を呼び出すロジックが含まれています。

console.log("before promise")
let promise = new Promise((resolve, reject) => {
   let resolvedFlag = false; 
//this is just a flag so we can intentionally throw the response to test logic
   console.log("first");
   console.log("second")
   console.log("third")
   console.log("fourth");
   resolvedFlag = true; //flip resolved to true once all console logs are done
   
   if(resolvedFlag) { //if resolved is true invoke the resolve function 	
        
resolve("Promise resolved");
console.log("after promise");
 
 
   } else { // else invoke the reject function with a new Error object with message
     reject(new Error("Promise failed")); 
     console.log("after promise");
   }
 });

ここのコードスニペットは、単純な約束を示しています。約束は次の3つの状態になります。

保留中 –解決も拒否もされていません–これは約束の初期状態です

解決済み –正常な実行

拒否 –実行エラー

上記のコードスニペットでresolvedFlagをtrueからfalseに切り替えて、解決されたPromiseと拒否されたPromiseの解決を示してみてください。

覚えておくべき主なことは、このPromiseには、Promiseが解決または拒否されるまでスクリプトの実行を一時停止する関数が含まれていることです。その後、スクリプトが再開されます。

プロミスレスポンスの使用

Promiseのインスタンスを開始するときは、then()を使用します およびcatch() 返されたPromiseから応答を受け取った後、使用するロジックをレイアウトします。これは1つのステートメントとしてレイアウトされています–概要は次のようになります。

promise.then（func）.catch（func）;

thenメソッドとcatchメソッドを呼び出す括弧内には、応答がパラメーターとして渡される無名関数があります。

promise // the promise we created above in prev code snippet.
   .then(response => { // hits here if successful response
// the logic that happens on successful response
     console.log(response); 
     console.log("after promise");
   })
   .catch(error => { // catches any errors here.
// the logic that happens on error response
     console.log(error.message);
     console.log("after promise");
   })

Promiseは、データベースを呼び出すとき、またはHTTP要求を行うときによく使用されます。

非同期/待機関数

sleep()をシミュレートする最後の方法 メソッドは、非同期/待機関数を使用することです。基本的に、これらの非同期関数は、Promisesで使用するのと同じロジックを構築するための別の方法ですが、コードが少なくて済みます。

asyncという用語 functionの前に配置されます ES6より前の関数のキーワード、およびES6+関数のパラメーターの前。先に進む前に実行したいロジックはすべて、このコードブロックに入ります。

const firstFunction = () => { // logic that you want to have done asynchronously
       let resolved = true;
      
       if(resolved) {
         let respObj = { message: "Resolved!"};   
         return respObj.message;
       } else {
         let errObj = { message: "Error!"};
         return errObj.message;
       }
     }
    
     const asyncExample = async () => { 
// async keyword before where parameters would go
       console.log("Calling function...");
       let result = await firstFunction();
// await goes before the invocation of the function that contains your logic.
// won't go to the next line until the function is done. 
       console.log(result);
       return result;
     }
    
     asyncExample() // invokes the async/await function

async / await関数を使用すると、実質的に同じ非同期のPromiseベースのプロセスになりますが、コードが少なくなります。

結論

この記事では、sleep()を模倣する方法を見ていきました。 他のプログラミング言語にネイティブな関数。 setTimeout()を使用しました Promisesとasync/await関数を確認できるように、非同期JavaScript関数の概念を示します。