비동기 JavaScript

"나중에 끝내겠습니다!"

기타 함수와 병행하여 실행되는 함수는 비동기(asynchronous)으로 불립니다

JavaScript setTimeout()는 좋은 예제입니다

비동기 JavaScript

이전 장에서 사용한 예제는 많이 간소화되었습니다.

그 목적은 콜백 함수 문법을 보여주는 것입니다：

예제

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2, myCallback) {
  let sum = num1 + num2;
  myCallback(sum);
}
myCalculator(5, 5, myDisplayer);

직접 시도해보세요

위의 예제에서는myDisplayer 함수 이름입니다.

그것은 인자로 전달됩니다 myCalculator();。

현실 세계에서 콜백은 대부분 비동기 함수와 함께 사용됩니다.

JavaScript는 표준 예제입니다 setTimeout();。

시간 초과를 기다립니다

JavaScript 함수를 사용할 때 setTimeout(); 그 때, 시간 초과가 발생할 때 실행할 콜백 함수를 지정할 수 있습니다：

예제

setTimeout(myFunction, 3000);
function myFunction() {
  document.getElementById("demo").innerHTML = "I love You !!";
}

직접 시도해보세요

위의 예제에서는myFunction 콜백으로 사용됩니다.

함수(함수 이름)는 매개변수로 전달되어 setTimeout();。

3000은 타임아웃 전의 밀리초수이므로 3초 후에 호출됩니다 myFunction();。

함수를 인자로 전달할 때는 괄호를 사용하지 마세요.

정확: setTimeout(myFunction, 3000);

오류: setTimeout(myFunction(), 3000);

함수 이름을 다른 함수에 인자로 전달하지 않으면, 항상 전체 함수를 전달할 수 있습니다：

예제

setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {}}
  document.getElementById("demo").innerHTML = value;
}

직접 시도해보세요

위의 예제에서는function(){ myFunction("I love You !!!"); } 콜백으로 사용됩니다. 이는 완전한 함수입니다. 완전한 함수는 setTimeout()에 매개변수로 전달됩니다。

3000은 타임아웃 전의 밀리초수이므로 3초 후에 호출됩니다 myFunction();。

기다림 간격:

JavaScript 함수를 사용할 때 setInterval(); 각 간격마다 실행할 콜백 함수를 지정할 수 있습니다：

예제

setInterval(myFunction, 1000);
function myFunction() {
  let d = new Date();
  document.getElementById("demo").innerHTML =
  d.getHours() + ":" +
  d.getMinutes() + ":" +
  d.getSeconds();
}

직접 시도해보세요

위의 예제에서는myFunction 콜백으로 사용됩니다.

함수(함수 이름)는 매개변수로 전달되어 setInterval();。

1000은 간격의 밀리초수이므로 myFunction(); 초마다 한 번 호출됩니다。

파일을 기다리는 중

외부 자원(스크립트나 파일 등)을 로드하는 함수를 생성하면, 내용이 완전히 로드되기 전에 이를 사용할 수 없습니다。

이는 콜백을 사용하는 최적의 시간입니다。

이 예제에서는 HTML 파일을 로드합니다 (mycar.html파일이 완전히 로드된 후 웹 페이지에서 HTML 파일을 표시합니다：

파일을 기다리는 중:

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
function getFile(myCallback) {
  let req = new XMLHttpRequest();
  req.open('GET', "mycar.html");
  req.onload = function() {
    if (req.status == 200) {
      myCallback(this.responseText);
    } else {
      myCallback("에러: " + req.status);
    }
  }
  req.send();
}
getFile(myDisplayer);

직접 시도해보세요

위의 예제에서는myDisplayer 콜백으로 사용됩니다.

함수(함수 이름)는 매개변수로 전달되어 getFile()。

아래는 mycar.html 의 복사본：

mycar.html

<img src="img_car.jpg" alt="좋은 자동차" style="width:100%">
<p>자동차는 이동을 위해 사용되는 바퀴가 달린 자력 기동차입니다.</p>
<p>이 용어의 대부분의 정의는 자동차가 주로 도로에서 운행되도록 설계되었으며, 일반적으로 1에서 8명의 좌석을 가지고 있으며, 일반적으로 네 개의 바퀴를 가지고 있다는 것을 명시합니다.</p>
<p>(위키백과)</p>