Почему моя переменная не изменяется после того, как я изменяю ее внутри функции? - Асинхронный код

Ответ Fabrício - на месте; но я хотел дополнить его ответ чем-то менее техническим, который фокусируется на аналогии, чтобы помочь объяснить концепцию асинхронности.

Аналогия...

Вчера работа, которую я делал, требовала некоторой информации от коллеги. Я позвонил ему; вот как пошла беседа:

Me: Привет, Боб, мне нужно знать, как мы foo'd bar'd на прошлой неделе. Джим хочет сообщить об этом, и вы единственный, кто знает подробности об этом.

Боб: Конечно, но мне понадобится около 30 минут?

Я: Этот великий Боб. Верните мне кольцо, когда у вас есть информация!

В этот момент я повесил трубку. Поскольку мне нужна была информация от Боба, чтобы закончить мой отчет, я оставил отчет и пошел за кофе вместо этого, затем я догнал какой-то адрес электронной почты. 40 минут спустя (Боб медленно), Боб позвонил и дал мне информацию, в которой я нуждался. На этом этапе я возобновил свою работу с моим докладом, поскольку у меня была вся необходимая мне информация.

Представьте себе, если бы разговор шел именно так;

Me: Привет, Боб, мне нужно знать, как мы foo'd bar'd на прошлой неделе. Джим хочет сообщить об этом, и ты единственный, кто знает подробности об этом.

Боб: Конечно, но мне понадобится около 30 минут?

Я: Этот великий Боб. Я буду ждать.

И я сидел и ждал. И ждал. И ждал. В течение 40 минут. Не делать ничего, кроме ожидания. В конце концов, Боб дал мне информацию, мы повесили трубку, и я закончил свой отчет. Но я потерял 40 минут производительности.

Это асинхронное и синхронное поведение

Это именно то, что происходит во всех примерах нашего вопроса. Загрузка изображения, загрузка файла с диска и запрос страницы через AJAX - это медленные операции (в контексте современных вычислений).

Вместо того, чтобы ждать завершения этих медленных операций, JavaScript позволяет зарегистрировать функцию обратного вызова, которая будет выполняться при завершении медленной операции. Тем временем, однако, JavaScript будет продолжать выполнять другой код. Тот факт, что JavaScript выполняет другой код, ожидая завершения медленной операции, делает асинхронным поведение. Если бы JavaScript выполнил операцию до завершения любого другого кода, это было бы синхронным поведением.

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

В приведенном выше коде мы запрашиваем JavaScript для загрузки lolcat.png, что является операцией sloooow. Функция обратного вызова будет выполнена после выполнения этой медленной операции, но в то же время JavaScript будет продолжать обрабатывать следующие строки кода; т.е. alert(outerScopeVar).

Вот почему мы видим, что предупреждение показывается undefined; поскольку alert() обрабатывается немедленно, а не после загрузки изображения.

Чтобы исправить наш код, все, что нам нужно сделать, - это alert(outerScopeVar) код alert(outerScopeVar) в функцию обратного вызова. Вследствие этого нам больше не нужна переменная outerScopeVar объявленная как глобальная переменная.

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

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

img.src = 'lolcat.png';

Вы всегда увидите, что обратный вызов указан как функция, потому что единственный способ JavaScript в JavaScript определить код, но не выполнить его до конца.

Поэтому во всех наших примерах function() {/* Do something */} является обратным вызовом; чтобы исправить все примеры, все, что нам нужно сделать, - это переместить код, который требует ответа от операции!

^{* Технически вы можете использовать eval(), но eval() для этого является злым}

Как я могу заставить моего звонящего ждать?

В настоящее время у вас есть код, похожий на этот;

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

Однако теперь мы знаем, что return outerScopeVar происходит немедленно; перед тем как функция обратного вызова onload обновила переменную. Это приводит к тому, что getWidthOfImage() возвращается undefined, а undefined - с предупреждением.

Чтобы исправить это, нам нужно разрешить функции, вызывающей getWidthOfImage() регистрировать обратный вызов, а затем перемещать предупреждение о ширине в пределах этого обратного вызова;

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

... как и прежде, обратите внимание, что нам удалось удалить глобальные переменные (в этом случае width).

Здесь более краткий ответ для людей, которые ищут быструю ссылку, а также некоторые примеры, использующие обещания и асинхронные/ждущие.

Начните с наивного подхода (который не работает) для функции, вызывающей асинхронный метод (в данном случае setTimeout) и возвращает сообщение:

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

undefined, логгируется в этом случае, потому что getMessage возвращает до setTimeout обратного вызова вызывается и обновления outerScopeVar.

Два основных способа решения этой проблемы - использование обратных вызовов и обещаний:

Callbacks

Изменение здесь заключается в том, что getMessage принимает параметр callback который будет вызываться для доставки результатов обратно в вызывающий код после его появления.

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

обещания

Обещания предоставляют альтернативу, которая более гибкая, чем обратные вызовы, потому что они могут быть естественно объединены для координации нескольких асинхронных операций. Стандартная реализация Promises/A+ изначально предоставляется в node.js(0. 12+) и во многих современных браузерах, но также реализована в таких библиотеках, как Bluebird и 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 предоставляет функциональность, аналогичную обещаниям с ее Отсрочкой.

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

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

асинхронная /Await

Если ваша среда JavaScript включает поддержку async и await (например, Node.js 7. 6+), вы можете использовать обещания синхронно в async функциях:

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

Чтобы сформулировать очевидное, чаша представляет outerScopeVar.

Асинхронные функции будут похожи...

Другие ответы превосходны, и я просто хочу дать прямой ответ на этот вопрос. Просто ограничение асинхронных вызовов jQuery

Все вызовы ajax (включая $.get или $.post или $.ajax) являются асинхронными.

Учитывая ваш пример

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

Выполнение кода начинается с строки 1, объявляет переменную и триггеры и асинхронный вызов в строке 2 (т.е. пост-запрос), и продолжает выполнение из строки 3, не дожидаясь завершения запроса на отправку.

Предположим, что запрос на отправку занимает 10 секунд, значение outerScopeVar будет установлено только после этих 10 секунд.

Чтобы попробовать,

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

Теперь, когда вы выполните это, вы получите предупреждение в строке 3. Теперь подождите некоторое время, пока не убедитесь, что почтовый запрос вернул некоторое значение. Затем, когда вы нажмете "ОК", в окне предупреждения следующее предупреждение выведет ожидаемое значение, потому что вы его ждали.

В сценарии реальной жизни код становится,

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

Весь код, зависящий от асинхронных вызовов, перемещается внутри асинхронного блока или ожидает асинхронных вызовов.

Во всех этих сценариях outerScopeVar изменяется или назначается значение асинхронно или , происходящее в более позднее время (ожидание или прослушивание какого-либо события), для которого текущее исполнение будет не ждите. Таким образом, во всех этих случаях текущий поток выполнения приводит к outerScopeVar = undefined

Давайте обсудим каждый пример (я отметил часть, которая называется асинхронно или задерживается для возникновения некоторых событий):

1.

Здесь мы регистрируем eventlistner, который будет выполняться на этом конкретном событии. Загрузите изображение. Затем текущее выполнение продолжается следующими строками img.src = 'lolcat.png'; и alert(outerScopeVar);, тем временем событие может не произойти. т.е. funtion img.onload ожидают, что упомянутое изображение загрузится, как можно скорее. Это произойдет во всех следующих случаях: событие может отличаться.

2.

Здесь играет роль время ожидания, которое вызывается обработчиком по истечении указанного времени. Здесь 0, но он регистрирует асинхронное событие, которое будет добавлено в последнюю позицию Event Queue для выполнения, что делает гарантированную задержку.

3.

На этот раз ajax callback.

4.

Node можно рассматривать как король асинхронного кодирования. Если отмеченная функция зарегистрирована как обработчик обратного вызова, которая будет выполнена после прочтения указанного файла.

5.

Очевидное обещание (что-то будет сделано в будущем) является асинхронным. см. Каковы различия между Отсрочкой, обещанием и Будущим в JavaScript?

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