JavaScript - 함수에서 반환

Question

JavaScript 함수에서 명시 적으로 반환해야합니까? 다른 언어에서는 함수가 반환되지 않을 때 스택 오버플로가 발생하는 경향이 있지만 오류가 발생하지만 JavaScript에서는 그렇지 않습니다.

또한 비동기이므로 함수가 언제 반환되는지를 결정하기가 어렵습니다. AJAX 호출이나 jQuery 애니메이션이 완료되기 전에 반환됩니다.

예를 들어, 함수는 AJAX 호출을 만들고 AJAX 결과가 반환 될 때까지 반환하지 않아야합니다. 문제는 AJAX 함수가 별도의 비동기 스레드에서 실행된다는 것입니다. 우리는 어떻게 그러한 기능에서 돌아올 것입니까?

Answer 1

JavaScript 기능에서 명시 적으로 반환 할 필요는 없습니다.

The trouble is, the AJAX function runs in a separate asynchronous thread. How would we return from such a function? 

모든 JavaScript 함수는 범위 끝에서 반환됩니다. return 문이 정의되지 않은 경우 함수는 을 정의되지 않음으로 반환합니다. AJAX 호출은 콜백으로 돌아가서 완료되면 readystatechange 이벤트를 발생시킵니다.

은 참조 : Does every Javascript function have to return a value?

Answer 2

당신은 JS 어떻게 작동하는지에로 혼동하는 것 :

함수는 AJAX 호출을하고, AJAX 결과가 반환 될 때까지 반환하지 않아야합니다. 문제는 AJAX 기능은 별도의 비동기 스레드에서 실행된다

이 문장은 잘못된 생각 몇 포함

:

1. 함수는 AJAX 호출을하고, AJAX 결과
을 반환 할 때까지 반환하지 않아야을
2. 는 AJAX 기능은

두 문은 완전히 사실이있는 별도의 비동기 스레드에서 실행하고 여기에 이유 :

ajax 호출을 수행하는 함수는 호출을 호출하고 요청을 보냅니다. AJAX는 비동기 JavaScript 및 XML의 약어로, 이러한 요청을하는 함수는 요청이 전송되면 반환합니다. 요청이 어떻게되는지, 응답이 회신되면 어떻게 처리되는지는 이 아니며 요청을 한 함수의 책임은이 아닙니다. 이것을 고려하십시오 :

function sendInfo(info) 
{ 
    var loader = $('#loader'); 
    $.ajax({ 
     url: 'your/url', 
     data: info, 
     type: 'post', 
     success: function(response) 
     {//this will get called when there is a response 
      loader.hide();//access to outer scope! 
     } 
    }); 
    loader.show(); 
} 

이 경우 $.ajax은 요청을 수행하는 기능입니다. 차단하는 경우 로더를 표시 할 수 없습니다. 이 함수는 요청이 전송 된 후에 반환되며, 처리 할 응답이 있으면 success 콜백이 호출됩니다. 이 함수는 로더를 처리합니다. 즉, 다시 숨 깁니다. AJAX 호출이 막히는 경우 우리는 거의 모든 사이트와 같이 반응이없고 역동적 인 사이트는 오늘 없습니다 (자동 완성 된 Google 검색 또는이 사이트 ...)

별도의 스레드에서 실행되는 AJAX 함수는 사실이 아닙니다. . AJAX는 요청 유형이며 참조하는 함수는 요청을 발행하는 함수이거나 별도의 스레드에서 실행되지 않는 함수이거나 콜백/핸들입니다.이 도은 별도의 스레드에서 실행되지 않습니다.
JavaScript는 항상 단일 스레드입니다. 은에 이벤트 루프가 있습니다. 각 이벤트에서 JS는 이벤트를 처리 할 리스너가 있는지 확인합니다. 그렇지 않다면, 그것의 끝이다. 존재한다면,이 핸들러는 한 번에 하나씩 을 호출 할 것이다.. 이러한 핸들러가 호출되는 동안 다른 코드는 실행될 수 없습니다.

이제 질문에 대답하십시오. 어떻게 이러한 기능에서 돌아올 수 있습니까? 글쎄, 어떤면에서는 이미 여러분이 : 모든 함수는 어떤 것을 반환합니다. 그러나 나는이 함수의 반환 값을 변수에 어떻게 할당 할 수 있는지 알고 싶습니다. 간단한 대답은 : 할 수 없다는 것입니다. 직접적으로 적어도 :

//not using jQuery: 
var returnVal = xhr.send(); 

복귀 성공 (onreadystatechange) 핸들러의 값이, 단순히 때문에 onreadystatechange 이벤트가 4 번 발생하지 않습니다! 당신이 무엇 수 있습니다 할 변수, 모듈 패턴을 사용하거나해야한다면, 전역 변수입니다.
이 함수가 별도의 스레드에서 실행되는 경우 범위와 전역 변수에 액세스하면 많은 동시성 문제가 발생하며 DOM을 조작하는 것은 당연합니다. 대신, 당신은이 작업을 수행 할 수 있습니다

var infoModule = (function() 
{ 
    var loader = $('#loader'), 
     module = {response: undefined}; 
    module.sendInfo = function(info) 
    { 
     $.ajax({ 
      url: 'your/url', 
      data: info, 
      type: 'post', 
      success: function(response) 
      {//this will get called when there is a response 
       loader.hide();//access to outer scope! 
       module.response = response; 
      } 
     }); 
     loader.show(); 
    }; 
    return module; 
}()); 

지금 당신은 이런 식으로 뭔가를 할 수 있습니다

infoModule.sendInfo({data: 'foo'}); 

및

요청이 완료된 후, 당신은 너무 같은 호출의 응답에서 얻을 수 있습니다 :

를

infoModule.response;