Dlaczego moja zmienna pozostaje niezmieniona po zmodyfikowaniu jej wewnątrz funkcji? - Asynchroniczny kod odniesienia

odpowiedź Fabrício jest trafna, ale chciałem uzupełnić jego odpowiedź o coś mniej technicznego, co skupia się na analogii, aby pomóc wyjaśnić pojęcie asynchroniczności [22].

Analogia...

Wczoraj moja praca wymagała pewnych informacji od kolegi. Zadzwoniłem do niego; Oto jak przebiegła rozmowa:

Ja : Cześć Bob, muszę wiedzieć, jak my foo 'D bar 'D w zeszłym tygodniu. Jim chce zgłoś to, a tylko Ty znasz szczegóły.

Bob: jasne, ale zajmie mi to około 30 minut?

Ja: to świetnie Bob. Oddzwoń, jak będziesz miał informacje!

Wyobraź sobie, że rozmowa potoczyłaby się w ten sposób;

Ja : Cześć Bob, muszę wiedzieć, jak my foo 'D bar 'D w zeszłym tygodniu. Jim chce raportu i tylko Ty znasz szczegóły.

Bob: jasne, ale zajmie mi to jakieś 30 minut?

Ja: to świetnie Bob. Poczekam.

To jest dokładnie to, co dzieje się we wszystkich przykładach w naszym pytaniu. Wczytywanie obrazu, wczytywanie pliku z dysku i żądanie strony za pomocą AJAX to powolne operacje (w kontekście nowoczesnych komputerów).

Zamiast oczekiwania na zakończenie tych powolnych operacji, JavaScript pozwala zarejestrować funkcję zwrotną, która zostanie wykonana po zakończeniu powolnej operacji. W międzyczasie jednak JavaScript będzie nadal wykonywał inny kod. Fakt, że JavaScript wykonuje inny kod czekając na powolne operacja zakończona powoduje, że zachowaniejest asynchroniczne. Gdyby JavaScript czekał na zakończenie operacji przed wykonaniem innego kodu, byłoby to zachowanie synchronous .

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);

W powyższym kodzie prosimy JavaScript o załadowanie lolcat.png, co jest operacją sloooow. Funkcja callback zostanie wykonana po wykonaniu tej powolnej operacji, ale w międzyczasie JavaScript będzie nadal przetwarzał kolejne wiersze kodu; tj. alert(outerScopeVar).

Dlatego widzimy alert pokazujący undefined; ponieważ {[7] } jest przetwarzany natychmiast, a nie po załadowaniu obrazu.

Aby naprawić nasz kod, wystarczy przenieść alert(outerScopeVar) kod do funkcji callback. W konsekwencji nie potrzebujemy już zmiennej outerScopeVar zadeklarowanej jako zmienna globalna.

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

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

img.src = 'lolcat.png';

Będziesz zawsze zobacz callback jest określony jako funkcja, ponieważ jest to jedyny * sposób w JavaScript, aby zdefiniować jakiś kod, ale nie wykonać go dopiero później.

Dlatego we wszystkich naszych przykładach, function() { /* Do something */ } jest wywołaniem zwrotnym; aby naprawić wszystkie przykłady, wszystko, co musimy zrobić, to przenieść kod, który wymaga reakcji operacji tam!

^{* technicznie można również użyć eval(), ale eval() jest złem w tym celu}

Jak sprawić, by mój rozmówca czekał?

Możesz mieć obecnie kod podobny do to;

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);

Jednak teraz wiemy, że return outerScopeVar dzieje się natychmiast; przed onload funkcja callback zaktualizowała zmienną. To prowadzi do getWidthOfImage() powrotu undefined i undefined bycia zaalarmowanym.

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);
});

... tak jak wcześniej, zauważ, że udało nam się usunąć zmienne globalne (w tym przypadku width).

Oto bardziej zwięzła odpowiedź dla osób, które szukają szybkiego odniesienia, a także kilka przykładów z wykorzystaniem obietnic i asynchronicznych / oczekujących.

Zacznij od naiwnego podejścia (które nie działa) dla funkcji, która wywołuje metodę asynchroniczną (w tym przypadku setTimeout) i zwraca wiadomość:

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

undefined jest zalogowany w tym przypadku, ponieważ getMessage zwraca przed wywołaniem wywołania zwrotnego setTimeout i aktualizacją outerScopeVar.

Dwa główne sposoby jej rozwiązania to użycie callbacks and promises :

Callbacks

Zmiana polega na tym, że getMessage przyjmuje parametr callback, który zostanie wywołany w celu dostarczenia wyników z powrotem do kodu wywołującego, gdy będzie dostępny.

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

Obietnice

Obietnice zapewniają alternatywę, która jest bardziej elastyczna niż wywołania zwrotne, ponieważ mogą być naturalnie łączone w celu koordynowania wielu operacji asynchronicznych. A obietnice/a+ standardowa implementacja jest natywnie dostarczany w node.js (0.12+) i wielu aktualnych przeglądarkach, ale jest również zaimplementowany w bibliotekach takich jak Bluebird I Q .

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

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

JQuery

JQuery zapewnia funkcjonalność, która jest podobna do obietnic z jego Deferreds.

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

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

Async / wait

Jeśli Twoje środowisko JavaScript zawiera wsparcie dla async oraz await (Jak Node.js 7.6+), wtedy można użyć obietnic synchronously within async functions:

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();

Aby stwierdzić oczywistość, Puchar reprezentuje outerScopeVar.

Funkcje asynchroniczne są podobne...

Inne odpowiedzi są doskonałe i chcę tylko udzielić prostej odpowiedzi na to pytanie. Po prostu ograniczam się do asynchronicznych wywołań jQuery

Wszystkie wywołania ajax (w tym $.get lub $.post lub $.ajax) są asynchroniczne.

Biorąc pod uwagę Twój przykład

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

Wykonywanie kodu rozpoczyna się od linii 1, deklaruje zmienną oraz wyzwalacze i asynchroniczne wywołanie w linii 2 (tzn. żądanie post) i kontynuuje jego wykonywanie z linii 3, nie czekając na żądanie post do dokończ jego wykonanie.

Powiedzmy, że zakończenie żądania post zajmuje 10 sekund, wartość outerScopeVar zostanie ustawiona dopiero po tych 10 sekundach.

Aby wypróbować,

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

W realnym scenariuszu, kod staje się,

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

Cały kod zależny od wywołań asynchronicznych jest przenoszony wewnątrz bloku asynchronicznego lub przez oczekiwanie na wywołania asynchroniczne.

We wszystkich tych scenariuszach outerScopeVar jest modyfikowana lub przypisywana wartość asynchronicznie lub dzieje się w późniejszym czasie (oczekiwanie lub nasłuchiwanie jakiegoś zdarzenia),na które bieżące wykonanie nie będzie czekać .]}

Omówmy każdy przykład (zaznaczyłem część, która jest nazywana asynchronicznie lub opóźniona dla niektórych zdarzeń):

1.

Tutaj rejestrujemy eventlistner, który zostanie wykonany na danym wydarzeniu.Tutaj ładowanie obrazu.Następnie bieżące wykonanie ciągłe z kolejnymi liniami img.src = 'lolcat.png'; i alert(outerScopeVar); tymczasem zdarzenie może nie wystąpić. tj. funtion img.onload Poczekaj, aż dany obraz załaduje się asynchronicznie. Stanie się tak cały następujący przykład - zdarzenie może się różnić.

2.

Tutaj rolę odgrywa Zdarzenie timeout, które wywoła procedurę obsługi po określonym czasie. Proszę. jest 0, ale nadal rejestruje zdarzenie asynchroniczne, które zostanie dodane do ostatniej pozycji Event Queue do wykonania, co powoduje gwarantowane opóźnienie.

3.

Tym razem Ajax callback.

4.

Węzeł może być uważany za króla kodowania asynchronicznego.Tutaj zaznaczona funkcja jest rejestrowana jako Obsługa wywołania zwrotnego, która zostanie wykonana po odczytaniu podanego plik.

5.

Oczywista obietnica (coś zostanie zrobione w przyszłości) jest asynchroniczna. zobacz jakie są różnice między odroczeniem, obietnicą i przyszłością w JavaScript?

Https://www.quora.com/Whats-the-difference-between-a-promise-and-a-callback-in-Javascript