TIL 34. ひどうきかんすう

console.log("Start");

fetch("https://jsonplaceholder.typicode.com/users")
  .then((response) => response.text())
  .then((result) => {
    console.log(result);
  });

console.log("End");

//start -> End > result 순으로 console에 출력된다.

fetch関数は非同期で実行される関数です.最初のconsole.logが実行され、fetch関数がrequestを発行すると、.thenメソッドはコールバック関数を登録します.その後、応答がコールバック関数に到達して実行される前に、すぐに次の行のコードを実行します.上記の例で整理したコード実行手順を以下に示します.

console.log('Start');

fetch関数(リクエスト送信およびコールバック登録)

console.log('End');

レンタルで来たら2.に登録するコールバック

を実行する.
一度に起動したタスクが完了する前に、次のコードに直接実行し、コールバックを実行し、非同期実行と呼ばれるタスクを完了します.非同期実行の効率は、前のコードのタスクが完了すると、次のコードが実行する同期実行に比べて、同じタスクをより迅速に処理できることである.

従来の非同期関数

1.setTimeout()

settimeout関数は、関数の実行を所要時間に遅延させるための関数です.

console.log("a");

setTimeout(() => {
  console.log("b");
}, 2000);

console.log("c");

// a -> c -> b

settimeout()=>{console.log("b");このコールバックの実行を2秒遅らせるため、このコードを実行するとまずa,c,2秒後にbが出力される.
fetch関数がコールバックを実行する条件が「リスナー到着時」の場合、settimeoutがコールバックを実行する条件は「設定したミリ秒数を超える時間」です.いずれにしても,コールバックの実行を後で遅らせる点は似ている.

2.setInterval()

setInterval関数は、特定のコールバックを一定時間間隔で実行する関数として登録されます.

console.log("a");

setInterval(() => {
  console.log("b");
}, 2000);

console.log("c");

// a -> c -> b -> b -> b .....

setInterval関数は、登録されたコールバック実行ごとにミリ秒レベルで1回実行されます.

3.addEventListener()

btn.addEventListener("click", function (e) {
  console.log("Hello Codeit!");
});

addEventListenerメソッドは、クリックなどのイベントが発生したときに実行されるコールバックを登録する非同期実行にも関連しています.パラメータに渡されるコールバックは、すぐに実行されるのではなく、後で特定の条件(イベント発生をクリック)を満たすときに実行されるためです.