(JS)同期と非同期(1/3)

事前理解:コールバックとプロセス

コールバック

他のコードの受信者として渡される実行可能なコード.受信コードのコードは、必要に応じて直ちにコールバックを実行してもよいし、後で実行してもよい.
表示

に約束

プロセスとは、JavaScriptの非同期処理を処理するオブジェクトです.JAvascriptの非同期処理は、「特定のコードの実行完了を待たずに、まず以下のコードのjavascriptの特性を実行する」ことを意味する.
Premisは主にサーバから受信したデータを画面に表示するために使用される.
表示
プロミスモードでコルバー地獄から抜け出すように、
Promisモードの欠点を克服するためにasync/awaitを用いた.

非同期の理解が容易

ファーストフード店の注文システムと比較して、動機と非動機を明確に説明することができる.

Sync Ordering System

を注文するためにレジに並びます.

の順番を待ちます.

の順番で、注文します.

まで食べ物が運ばれてきて、列に並ばずにレジで待っていました.

食べ物が出てきて、並んで席に座って食事をします.

の後ろに並んだお客様も初旬の小隊で注文します.

function multiply (a, b) {
  return a * b;
}

function square (n) { // 3) squre 함수를 실행하고, squre 함수는 
  return multiply(n, n);  // 4) mutiply 함수를 실행합니다. 
}

console.log("Start"); // 1) 제일 먼저 실행되니다. 

const result = square(2); // 2) 다음으로 해당 줄이 실행됩니다.
console.log(result);  // 5) 해당 코드가 실행이 되고, 

console.log("end");  // 6) 앞선 코드 실행문들 모두가 완료된 후 실행됩니다.

Async Ordering System

レジに並んで

を注文.

の順番を待ちます.

順序が

なら、注文します.

注文番号を受け取り、席に座って料理を待つ
私たちの後ろに並んでいるお客様も順番に注文します.

で注文した料理ができたので、番号を呼んでから料理を持って行きます.

function multiply (a, b) {
  return a * b;
}

function square (n) {
  return multiply(n, n);
}

console.log("Start"); // 1) 해당 줄이 실행됩니다. 

setTimeout(function doSomething () { // setTimeOut은 인자로 주어진 함수를 비동기로 실행합니다. 2) 해당 줄이 실행됩니다. (1초 후에 doSomething 함수 실행예약) 4) 일 초가 지난 후, doSomething 함수가 실행됩니다. 
  const result = square(2);
  console.log(result); // 5)마지막으로 콘솔에 result(4)가 표시된다. 
}, 1000);

console.log("end"); // 3) setTimeout의 모든 작업이 완료되기를 대기하지 않습니다. setTimeout은 브라우저에게 예약을 한 후, 그 다음 대기 중인 코드가 실행될 수 있도록 자리를 비켜줍니다. 때문에, 해당 줄이 해당 줄이 먼저 실행된다.

非同期ストリームで実行されるいくつかの関数または機能は固定されています.重要なのは、非同期関数を使用しない限り、作成された通常のJavaScriptは決して突然非同期で実行されません.最も多くは、どの関数が非同期関数であるか、および非同期関数の例を見てみましょう.

非同期関数の例(FETCH)

console.log("start"); // 1) 해당 줄이 실행됩니다. 

fetch("https://www.naver.com/") // 2) 해당 줄이 실행됩니다. fetch란, 브라우저에게 요청을 보내달라는 주문을 넣는 함수입니다. fetch는 비동기로 동작하기 때문에, 다음 실행문을 진행합니다. 
  .then((res) => {
    console.log("Response ▶︎▶︎▶︎", res); // 4) 요청이 완료되면 응답이 콘솔에 출력됩니다.
  });
  
console.log("end");  // 3) 해당 줄이 실행됩니다. 

非同期シリアル進捗とパラレル進捗

// 직렬적으로 진행 (첫 번째 비동기 작업이 모두 완료된 후, 다음 비동기 시작)
setTimeout(function foo () {
  console.log("foo complete");

  setTimeout(function bar () {
    console.log("bar complete");
  }, 1000);
}, 1000);

// 병렬 진행 (첫 번째 비동기에 대한 완료를 기다리지 않고 다음 비동기 시작)
setTimeout(function foo () {
  console.log("foo complete");
}, 1000);

setTimeout(function bar () {
  console.log("bar complete");
}, 1000);

続いて第2話：Promise