[javascript] 함수 내에서 변수를 수정 한 후 왜 변수가 변경되지 않습니까? -비동기 코드 참조

한마디로 대답 : 비동기 성 .

서문

이 항목은 여기에서 스택 오버플로에서 적어도 수천 번 반복되었습니다. 따라서 먼저 매우 유용한 리소스를 지적하고 싶습니다.

• “비동기 호출에서 응답을 어떻게 반환합니까?”에 대한 @Felix Kling의 답변 . “구조 코드”섹션뿐만 아니라 동기식 및 비동기식 흐름을 설명하는 뛰어난 답변을 참조하십시오.
  @Benjamin Gruenbaum도 같은 스레드에서 비동기 성을 설명하기 위해 많은 노력을 기울였습니다.

• “fs.readFile에서 데이터 가져 오기”에 대한 @Matt Esch의 답변 은 간단한 방식으로 비동기 성이 매우 잘 설명되어 있습니다.

당면한 질문에 대한 답

먼저 일반적인 동작을 추적 해 봅시다. 모든 예제에서는 함수outerScopeVar 내부에서 수정 됩니다 . 이 기능은 즉시 실행되지 않으며 인수로 지정되거나 전달됩니다. 이것이 우리가 콜백 이라고 부르는 것 입니다.

이제 문제는 언제 콜백이 호출됩니까?

경우에 따라 다릅니다. 몇 가지 일반적인 동작을 다시 추적 해 보겠습니다.

• img.onload이미지가 성공적으로로드 된 경우 나중에 호출 될 수 있습니다 .
• setTimeout지연 시간이 만료되고에 의해 시간 초과가 취소되지 않은 후 나중에 언젠가 호출 될 수 있습니다 clearTimeout. 참고 : 0지연으로 사용하더라도 모든 브라우저에는 최소 시간 초과 지연 제한 (HTML5 사양에서 4ms로 지정)이 있습니다.
• jQuery $.post의 콜백은 나중에 Ajax 요청이 성공적으로 완료되었을 때 호출 될 수 있습니다 .
• Node.js 는 파일이 성공적으로 읽히거나 오류가 발생했을 때 언젠가fs.readFile 호출 될 수 있습니다 .

모든 경우에 향후 콜백이 발생할 수 있습니다 . 이 “언젠가”는 비동기 흐름이라고 합니다.

비동기식 실행이 동기식 흐름에서 빠져 나옵니다. 즉, 비동기 코드 스택이 실행되는 동안 비동기 코드는 실행 되지 않습니다 . 이것이 자바 스크립트가 단일 스레드라는 의미입니다.

보다 구체적으로, (a) 동기 코드 스택을 실행하지 않고 JS 엔진이 유휴 상태 인 경우 비동기 콜백 (예 : 만료 된 시간 초과, 수신 된 네트워크 응답)을 트리거 한 이벤트를 폴링하고 차례로 실행합니다. 이를 이벤트 루프 로 간주 합니다 .

즉, 손으로 그린 ​​빨간색 모양으로 강조 표시된 비동기 코드는 해당 코드 블록의 나머지 모든 동기 코드가 실행 된 후에 만 ​​실행될 수 있습니다.

요컨대, 콜백 함수는 동 기적으로 생성되지만 비동기 적으로 실행됩니다. 비동기 함수가 실행되었다는 것을 알기 전까지는 비동기 함수의 실행에 의존 할 수 없습니다.

정말 간단합니다. 비동기 함수 실행에 의존하는 논리는이 비동기 함수 내부에서 시작 / 호출되어야합니다. 예를 들어, 콜백 함수 내 에서 alerts 및 console.logs를 너무 이동하면 결과가 해당 시점에 사용 가능하므로 예상 결과가 출력됩니다.

자신의 콜백 로직 구현

비동기 함수의 결과로 더 많은 작업을 수행하거나 비동기 함수가 호출 된 위치에 따라 결과로 다른 작업을 수행해야하는 경우가 종종 있습니다. 좀 더 복잡한 예를 다루겠습니다.

var outerScopeVar;
helloCatAsync();
alert(outerScopeVar);

function helloCatAsync() {
    setTimeout(function() {
        outerScopeVar = 'Nya';
    }, Math.random() * 2000);
}

참고 : 내가 사용 setTimeout하는 일반 비동기 함수로 임의의 지연, 같은 예는 아약스, 적용 readFile, onload및 기타 비동기 흐름.

이 예는 다른 예와 동일한 문제를 분명히 겪고 있으며 비동기 함수가 실행될 때까지 기다리지 않습니다.

우리 자신의 콜백 시스템을 구현하는 방법을 다루겠습니다. 우선, 우리 outerScopeVar는이 경우 완전히 쓸모없는 그 추한 것을 제거 합니다. 그런 다음 함수 인수 인 콜백을 허용하는 매개 변수를 추가합니다. 비동기 작업이 완료되면이 콜백을 호출하여 결과를 전달합니다. 구현 (주석을 순서대로 읽으십시오) :

// 1. Call helloCatAsync passing a callback function,
//    which will be called receiving the result from the async operation
helloCatAsync(function(result) {
    // 5. Received the result from the async function,
    //    now do whatever you want with it:
    alert(result);
});

// 2. The "callback" parameter is a reference to the function which
//    was passed as argument from the helloCatAsync call
function helloCatAsync(callback) {
    // 3. Start async operation:
    setTimeout(function() {
        // 4. Finished async operation,
        //    call the callback passing the result as argument
        callback('Nya');
    }, Math.random() * 2000);
}

위 예제의 코드 스 니펫 :

// 1. Call helloCatAsync passing a callback function,
//    which will be called receiving the result from the async operation
console.log("1. function called...")
helloCatAsync(function(result) {
    // 5. Received the result from the async function,
    //    now do whatever you want with it:
    console.log("5. result is: ", result);
});

// 2. The "callback" parameter is a reference to the function which
//    was passed as argument from the helloCatAsync call
function helloCatAsync(callback) {
    console.log("2. callback here is the function passed as argument above...")
    // 3. Start async operation:
    setTimeout(function() {
    console.log("3. start async operation...")
    console.log("4. finished async operation, calling the callback, passing the result...")
        // 4. Finished async operation,
        //    call the callback passing the result as argument
        callback('Nya');
    }, Math.random() * 2000);
}

대부분의 실제 사례에서 DOM API와 대부분의 라이브러리는 이미 콜백 기능을 제공합니다 ( helloCatAsync이 예제에서는 구현). 콜백 함수를 전달하고 동기 흐름에서 실행될 것임을 이해하고이를 수용하도록 코드를 재구성해야합니다.

또한 비동기 특성으로 인해 return비동기 코드가 이미 실행 완료된 후에도 비동기 콜백이 실행되므로 비동기 플로우에서 콜백이 정의 된 동기 플로우로 값을 되돌릴 수 없습니다.

대신에 return비동기 콜백에서 값을 보내고, 당신은 … 약속을 콜백 패턴을 사용하기 위해, 또는 것입니다.

약속

콜백 지옥 을 바닐라 JS와 함께 유지하는 방법이 있지만 약속은 점점 커지고 있으며 현재 ES6에서 표준화되고 있습니다 ( Promise-MDN 참조 ).

약속 (일명 Futures)은 비동기 코드를보다 선형적이고 유쾌하게 읽을 수있게하지만 전체 기능을 설명하는 것은이 질문의 범위를 벗어납니다. 대신, 나는 다음과 같은 훌륭한 자료를 관심의 대상으로 남길 것이다.

• JavaScript 약속-HTML5 락
• 약속의 요점을 놓치다-domenic.me

JavaScript 비동기성에 대한 추가 자료

• Art of Node-Callbacks 는 바닐라 JS 예제와 Node.js 코드로 비동기 코드와 콜백에 대해 잘 설명합니다.

참고 : 이 답변을 Community Wiki로 표시 했으므로 평판이 100 이상인 사람은 누구나 편집하고 개선 할 수 있습니다! 이 답변을 개선하거나 원할 경우 완전히 새로운 답변을 제출하십시오.

이 질문을 Ajax와 관련이없는 비 동시성 문제에 답변하기 위해 정식 주제로 바꾸고 싶습니다 ( AJAX 호출에서 응답을 반환하는 방법 은 무엇입니까? ) !

답변

var outerScopeVar;
var img = document.createElement('img');

// Here we register the callback function.
img.onload = function() {
    // Code within this function will be executed once the image has loaded.
    outerScopeVar = this.width;
};

// But, while the image is loading, JavaScript continues executing, and
// processes the following lines of JavaScript.
img.src = 'lolcat.png';
alert(outerScopeVar);

var img = document.createElement('img');

img.onload = function() {
    var localScopeVar = this.width;
    alert(localScopeVar);
};

img.src = 'lolcat.png';

function getWidthOfImage(src) {
    var outerScopeVar;

    var img = document.createElement('img');
    img.onload = function() {
        outerScopeVar = this.width;
    };
    img.src = src;
    return outerScopeVar;
}

var width = getWidthOfImage('lolcat.png');
alert(width);

function getWidthOfImage(src, cb) {
    var img = document.createElement('img');
    img.onload = function() {
        cb(this.width);
    };
    img.src = src;
}

getWidthOfImage('lolcat.png', function (width) {
    alert(width);
});

function getMessage() {
  var outerScopeVar;
  setTimeout(function() {
    outerScopeVar = 'Hello asynchronous world!';
  }, 0);
  return outerScopeVar;
}
console.log(getMessage());

function getMessage(callback) {
  setTimeout(function() {
    callback('Hello asynchronous world!');
  }, 0);
}
getMessage(function(message) {
  console.log(message);
});

function getMessage() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve('Hello asynchronous world!');
    }, 0);
  });
}

getMessage().then(function(message) {
  console.log(message);
});

function getMessage() {
  var deferred = $.Deferred();
  setTimeout(function() {
    deferred.resolve('Hello asynchronous world!');
  }, 0);
  return deferred.promise();
}

getMessage().done(function(message) {
  console.log(message);
});

function getMessage () {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            resolve('Hello asynchronous world!');
        }, 0);
    });
}

async function main() {
    let message = await getMessage();
    console.log(message);
}

main();

var outerScopeVar;  //line 1
$.post('loldog', function(response) {  //line 2
    outerScopeVar = response;
});
alert(outerScopeVar);  //line 3

var outerScopeVar; //line 1
$.post('loldog', function(response) {  //line 2, takes 10 seconds to complete
    outerScopeVar = response;
});
alert("Lets wait for some time here! Waiting is fun");  //line 3
alert(outerScopeVar);  //line 4

var outerScopeVar;
$.post('loldog', function(response) {
    outerScopeVar = response;
    alert(outerScopeVar);
});