Dlaczego moja zmienna pozostaje niezmieniona po zmodyfikowaniu jej w funkcji? - Odwołanie do kodu asynchronicznego

Biorąc pod uwagę następujące przykłady, dlaczego outerScopeVarwe wszystkich przypadkach jest niezdefiniowany?

var outerScopeVar;

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

var outerScopeVar;
setTimeout(function() {
    outerScopeVar = 'Hello Asynchronous World!';
}, 0);
alert(outerScopeVar);

// Example using some jQuery
var outerScopeVar;
$.post('loldog', function(response) {
    outerScopeVar = response;
});
alert(outerScopeVar);

// Node.js example
var outerScopeVar;
fs.readFile('./catdog.html', function(err, data) {
    outerScopeVar = data;
});
console.log(outerScopeVar);

// with promises
var outerScopeVar;
myPromise.then(function (response) {
    outerScopeVar = response;
});
console.log(outerScopeVar);

// geolocation API
var outerScopeVar;
navigator.geolocation.getCurrentPosition(function (pos) {
    outerScopeVar = pos;
});
console.log(outerScopeVar);

Dlaczego wyświetla się undefinedwe wszystkich tych przykładach? Nie chcę obejść tego problemu, chcę wiedzieć, dlaczego tak się dzieje.

Uwaga: jest to kanoniczne pytanie dotyczące asynchroniczności JavaScript . Popraw to pytanie i dodaj bardziej uproszczone przykłady, z którymi społeczność może się identyfikować.

Odpowiedź na jedno słowo: asynchroniczność .

Przedmowy

Ten temat został powtórzony co najmniej kilka tysięcy razy tutaj, w przepełnieniu stosu. Dlatego najpierw chciałbym wskazać kilka niezwykle przydatnych zasobów:

• Odpowiedź Felixa Klinga na „Jak zwrócić odpowiedź z połączenia asynchronicznego?” . Zobacz jego doskonałą odpowiedź wyjaśniającą przepływy synchroniczne i asynchroniczne, a także sekcję „Kod restrukturyzacji”.
  @Benjamin Gruenbaum również włożył wiele wysiłku w wyjaśnienie asynchroniczności w tym samym wątku.

• Odpowiedź @Matta Escha na „Pobierz dane z pliku fs.readFile” również bardzo dobrze wyjaśnia asynchroniczność w prosty sposób.

Odpowiedź na pytanie

Najpierw prześledźmy wspólne zachowanie. We wszystkich przykładach outerScopeVarjest modyfikowany wewnątrz funkcji . Ta funkcja najwyraźniej nie jest natychmiast wykonywana, jest przypisywana lub przekazywana jako argument. To nazywamy oddzwanianiem .

Teraz pytanie brzmi: kiedy wywoływane jest to oddzwanianie?

To zależy od przypadku. Spróbujmy ponownie prześledzić niektóre typowe zachowania:

• img.onloadmoże zostać wywołany w przyszłości , gdy (i jeśli) obraz zostanie pomyślnie załadowany.
• setTimeoutmoże zostać wywołany w przyszłości , po upływie opóźnienia i przekroczeniu limitu czasu przez clearTimeout. Uwaga: nawet jeśli używasz 0jako opóźnienia, wszystkie przeglądarki mają minimalny limit opóźnienia (określony jako 4ms w specyfikacji HTML5).
• Wywołanie $.postzwrotne jQuery może zostać wywołane w przyszłości , gdy (i jeśli) żądanie Ajax zostanie pomyślnie zakończone.
• Plik Node.js fs.readFilemoże zostać wywołany w przyszłości , gdy plik zostanie odczytany pomyślnie lub wystąpi błąd.

We wszystkich przypadkach mamy wywołanie zwrotne, które może zostać uruchomione w przyszłości . To „kiedyś” w przyszłości nazywamy przepływem asynchronicznym .

Wykonanie asynchroniczne jest wypychane z przepływu synchronicznego. Oznacza to, że kod asynchroniczny nigdy się nie uruchomi podczas wykonywania stosu kodu synchronicznego. Takie jest znaczenie JavaScript jako jednowątkowego.

Mówiąc dokładniej, gdy silnik JS jest w stanie bezczynności - nie wykonuje stosu (a) kodu synchronicznego - będzie sprawdzał zdarzenia, które mogły wywołać asynchroniczne wywołania zwrotne (np. Upłynął limit czasu, odebrano odpowiedź sieci) i wykonywał je jeden po drugim. Jest to traktowane jako pętla zdarzeń .

Oznacza to, że kod asynchroniczny wyróżniony w ręcznie rysowanych czerwonych kształtach może zostać wykonany tylko po wykonaniu całego pozostałego kodu synchronicznego w odpowiednich blokach kodu:

Krótko mówiąc, funkcje zwrotne są tworzone synchronicznie, ale wykonywane asynchronicznie. Po prostu nie możesz polegać na wykonaniu funkcji asynchronicznej, dopóki nie dowiesz się, że została ona wykonana, i jak to zrobić?

To naprawdę proste. Logikę zależną od wykonania funkcji asynchronicznej należy uruchomić / wywołać z wnętrza tej funkcji asynchronicznej. Na przykład przesunięcie alertsi console.logsi wewnątrz funkcji wywołania zwrotnego wygeneruje oczekiwany wynik, ponieważ wynik jest dostępny w tym momencie.

Implementacja własnej logiki zwrotnej

Często trzeba robić więcej rzeczy z wynikiem funkcji asynchronicznej lub robić różne rzeczy z wynikiem w zależności od tego, gdzie wywołano funkcję asynchroniczną. Zajmijmy się nieco bardziej złożonym przykładem:

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

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

Uwaga: Używam setTimeoutz losowym opóźnieniem jako rodzajowy funkcji asynchronicznego, ten sam przykład odnosi się do Ajaksu readFile, onloada także wszelkie inne przepływu asynchroniczny.

W tym przykładzie wyraźnie występuje ten sam problem, co w innych przykładach, nie czeka on na wykonanie funkcji asynchronicznej.

Zajmijmy się tym, wdrażając własny system oddzwaniania. Po pierwsze pozbywamy się tego brzydkiego, outerScopeVarco w tym przypadku jest całkowicie bezużyteczne. Następnie dodajemy parametr, który akceptuje argument funkcji, nasze wywołanie zwrotne. Po zakończeniu operacji asynchronicznej wywołujemy to wywołanie zwrotne, przekazując wynik. Realizacja (proszę przeczytać komentarze w kolejności):

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

Fragment kodu powyższego przykładu:

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

Najczęściej w rzeczywistych przypadkach użycia DOM API i większość bibliotek już zapewnia funkcję wywołania zwrotnego ( helloCatAsyncimplementacja w tym przykładzie demonstracyjnym). Musisz tylko przekazać funkcję wywołania zwrotnego i zrozumieć, że będzie ona wykonywana poza przepływem synchronicznym, i zrestrukturyzuj kod, aby to uwzględnić.

Zauważysz również, że ze względu na asynchroniczną naturę jest to niemożliwe return przejście z przepływu asynchronicznego z powrotem do przepływu synchronicznego, w którym zdefiniowano wywołanie zwrotne, ponieważ wywołania asynchroniczne są wykonywane długo po zakończeniu wykonywania kodu synchronicznego.

Zamiast returnwprowadzać wartość z asynchronicznego wywołania zwrotnego, będziesz musiał użyć wzorca wywołania zwrotnego lub ... Obiecuje.

Obietnice

Chociaż istnieją sposoby, aby trzymać piekło oddzwaniania na dystans dzięki waniliowej JS, obietnice rosną w popularności i są obecnie standaryzowane w ES6 (patrz Obietnica - MDN ).

Obietnice (inaczej Futures) zapewniają bardziej liniowy, a przez to przyjemny, odczyt kodu asynchronicznego, ale wyjaśnienie ich całej funkcjonalności nie wchodzi w zakres tego pytania. Zamiast tego pozostawię te doskonałe zasoby zainteresowanym:

• Obietnice JavaScript - skały HTML5
• Tęsknisz za punktem obietnic - domenic.me

Więcej materiałów do czytania na temat asynchroniczności JavaScript

• Art of Node - Callbacki bardzo dobrze wyjaśnia kod asynchroniczny i callbacki z przykładami waniliowych JS i kodu Node.js.

Uwaga: zaznaczyłem tę odpowiedź jako Wiki społeczności, dlatego każdy z co najmniej 100 reputacjami może ją edytować i ulepszać! Popraw tę odpowiedź lub prześlij zupełnie nową odpowiedź, jeśli chcesz.

Chcę przekształcić to pytanie w kanoniczny temat, aby odpowiedzieć na problemy asynchroniczne niezwiązane z Ajaxem (istnieje celu odpowiedź na wywołanie AJAX? ), Dlatego ten temat potrzebuje twojej pomocy, aby był tak dobry i pomocny, jak to możliwe !

Odpowiedź Fabrício jest natychmiastowa; ale chciałem uzupełnić jego odpowiedź o coś mniej technicznego, co koncentruje się na analogii, która pomoże wyjaśnić pojęcie asynchroniczności .

Analogia ...

Wczoraj praca, którą wykonywałem, wymagała od kolegi pewnych informacji. Zadzwoniłem do niego; oto jak przebiegła rozmowa:

Me : Hi Bob, muszę wiedzieć jak foo 'D bar ' d ostatniego tygodnia. Jim chce raport na ten temat, a ty jesteś jedynym, który zna szczegóły na ten temat.

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

Ja : To świetnie, Bob. Oddzwoń, gdy zdobędziesz informacje!

W tym momencie odłożyłem słuchawkę. Ponieważ potrzebowałem informacji od Boba, aby ukończyć raport, opuściłem raport i zamiast tego poszedłem na kawę, a potem dostałem e-maila. 40 minut później (Bob jest wolny), Bob oddzwonił i dał mi informacje, których potrzebowałem. W tym momencie wznowiłem pracę z moim raportem, ponieważ miałem wszystkie informacje, których potrzebowałem.

Wyobraź sobie, że zamiast tego rozmowa przebiegła w ten sposób;

Me : Hi Bob, muszę wiedzieć jak foo 'D bar ' d ostatniego tygodnia. Jim want ma raport na ten temat, a ty jesteś jedynym, który zna szczegóły na ten temat.

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

Ja : To świetnie, Bob. Poczekam.

I siedziałem tam i czekałem. I czekałem. I czekałem. Przez 40 minut. Nie robiąc nic, tylko czekając. W końcu Bob przekazał mi informacje, rozłączyliśmy się i ukończyłem raport. Ale straciłem 40 minut wydajności.

Jest to zachowanie asynchroniczne vs. synchroniczne

Tak właśnie dzieje się we wszystkich przykładach w naszym pytaniu. Ładowanie obrazu, ładowanie pliku z dysku i żądanie strony za pośrednictwem AJAX to powolne operacje (w kontekście nowoczesnego przetwarzania).

Zamiast czekać na zakończenie tych powolnych operacji, JavaScript pozwala zarejestrować funkcję zwrotną, która zostanie wykonana po zakończeniu powolnej operacji. Jednak w międzyczasie JavaScript będzie nadal wykonywać inny kod. Fakt, że JavaScript wykonuje inny kod w oczekiwaniu na zakończenie powolnej operacji, powoduje, że zachowanie jest asynchroniczne . Gdyby JavaScript czekał na zakończenie operacji przed wykonaniem jakiegokolwiek innego kodu, byłoby to zachowanie synchroniczne .

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 do załadowania lolcat.png, co jest powolną operacją. Funkcja wywołania zwrotnego zostanie wykonana po zakończeniu tej powolnej operacji, ale w międzyczasie JavaScript będzie przetwarzać kolejne wiersze kodu; tj alert(outerScopeVar).

Dlatego widzimy ostrzeżenie undefined; ponieważ alert()jest on przetwarzany natychmiast, a nie po załadowaniu obrazu.

Aby naprawić nasz kod, wystarczy przenieść alert(outerScopeVar)kod do funkcji wywołania zwrotnego. W rezultacie nie potrzebujemy już outerScopeVarzmiennej 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 zobaczyć zwrotna jest określona jako funkcja, ponieważ jest to jedyny sposób w JavaScript * zdefiniować jakiś kod, ale nie wykonać ją później.

Dlatego we wszystkich naszych przykładach function() { /* Do something */ }jest to callback; aby naprawić wszystkie przykłady, wystarczy przenieść tam kod, który wymaga odpowiedzi operacji!

^{* Technicznie możesz też użyć eval(), ale eval()jest zły do tego celu}

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

Być może masz obecnie kod podobny do tego;

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

Wiemy jednak, że return outerScopeVardzieje się to natychmiast; zanim onloadfunkcja wywołania zwrotnego zaktualizuje zmienną. Prowadzi to do getWidthOfImage()powrotu undefinedi undefinedotrzymania ostrzeżenia.

Aby to naprawić, musimy pozwolić funkcji wywołującej getWidthOfImage()na zarejestrowanie wywołania zwrotnego, a następnie przesunąć ostrzeżenie o szerokości, aby znajdowało się w obrębie tego wywołania zwrotnego;

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

... jak poprzednio, zauważ, że byliśmy w stanie 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 wykorzystujących obietnice i asynchronizację / czekanie.

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

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

undefinedzostaje zalogowany w tym przypadku, ponieważ getMessagewraca przed setTimeoutwywołaniem oddzwaniania i aktualizuje się outerScopeVar.

Dwoma głównymi sposobami rozwiązania tego problemu są oddzwanianie i obietnice :

Callbacki

Zmiana polega na getMessagezaakceptowaniu callbackparametru, 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 stanowią alternatywę, która jest bardziej elastyczna niż wywołania zwrotne, ponieważ można je naturalnie łączyć w celu koordynowania wielu operacji asynchronicznych. Promises / A + standardowy realizacja jest warunkiem natywnie w node.js (0.12+) oraz wielu obecnych przeglądarek, ale jest również realizowany w bibliotekach, 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 Deferreds

jQuery zapewnia funkcjonalność podobną do obietnic z Odroczonymi.

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

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

async / czekaj

Jeśli twoje środowisko JavaScript obsługuje asynci await(jak Node.js 7.6+), możesz używać obietnic synchronicznie w ramach asyncfunkcji:

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

Mówiąc oczywiste, puchar reprezentuje outerScopeVar.

Funkcje asynchroniczne są jak ...

Pozostałe odpowiedzi są doskonałe, a ja po prostu chcę udzielić bezpośredniej odpowiedzi na to pytanie. Tylko ograniczenie do asynchronicznych wywołań jQuery

Wszystkie wywołania ajax (w tym $.getlub $.postlub $.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

Wykonanie kodu rozpoczyna się od wiersza 1, deklaruje zmienną oraz wyzwala i asynchroniczne wywołanie w wierszu 2 (tj. Żądanie postu) i kontynuuje wykonywanie od linii 3, nie czekając na zakończenie żądania postu.

Powiedzmy, że wykonanie żądania pocztowego zajmuje 10 sekund, wartość outerScopeVarzostanie ustawiona dopiero po tych 10 sekundach.

Spró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

Teraz, gdy to wykonasz, otrzymasz alert w linii 3. Teraz poczekaj trochę czasu, aż będziesz pewien, że żądanie post zwróciło jakąś wartość. Następnie po kliknięciu OK w polu alertu następny alert wydrukuje oczekiwaną wartość, ponieważ na nią czekałeś.

W scenariuszu z życia kod staje się

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

Cały kod, który zależy od wywołań asynchronicznych, jest przenoszony do bloku asynchronicznego lub przez oczekiwanie na wywołania asynchroniczne.

We wszystkich tych scenariuszach outerScopeVarmodyfikuje się lub przypisuje wartość asynchronicznie lub dzieje się w późniejszym czasie (oczekiwanie lub oczekiwanie na wystąpienie jakiegoś zdarzenia), na które bieżące wykonanie nie będzie czekać . Więc we wszystkich tych przypadkach bieżący przepływ wykonania powodujeouterScopeVar = undefined

Omówmy każdy przykład (zaznaczyłem część, która jest wywoływana asynchronicznie lub opóźniona w przypadku wystąpienia niektórych zdarzeń):

1.

Tutaj rejestrujemy listę zdarzeń, która zostanie wykonana po tym konkretnym zdarzeniu. Tutaj ładowanie obrazu. Następnie bieżące wykonanie jest kontynuowane z kolejnymi wierszami, img.src = 'lolcat.png';a alert(outerScopeVar);tymczasem zdarzenie może się nie pojawić. tj. funtionimg.onload czeka asynchronicznie na załadowanie wskazanego obrazu. Stanie się tak na każdym z poniższych przykładów - wydarzenie może się różnić.

2)

Tutaj zdarzenie timeout odgrywa rolę, która wywoła moduł obsługi po określonym czasie. Tutaj jest 0, ale nadal rejestruje zdarzenie asynchroniczne, zostanie dodane do ostatniej pozycji Event Queuewykonania, co gwarantuje gwarantowane opóźnienie.

3)

Tym razem oddzwanianie ajax.

4

Węzeł można uznać za króla kodowania asynchronicznego. Tutaj zaznaczona funkcja jest rejestrowana jako moduł obsługi wywołania zwrotnego, który zostanie wykonany po odczytaniu określonego pliku.

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