Почему значения в переменных js отличаются?

Question

[Maxim Plotnikov]

Добрый вечер, у меня вопрос по поводу JavaScript.
Есть следующий кусочек кода.

function start() {
        update();
        /*let timerId = setInterval(update, 1000);*/
      }

      function update() {
        let now = new Date();
        document.getElementById("time").innerHTML = "Время: " + now;

        $.ajax(
          'get_users.php', {
            success: function(data1) {
              var users = JSON.parse(data1);
              for (key in users) {
              	$.ajax({
                    url: "https://api.vk.com/method/users.get?user_ids=" + users[key]['vk_id'] + "&fields=photo_50&access_token=token&v=5.124",
                    type: 'GET',
                    dataType: 'jsonp'
                  })
                  .done(function(data2) {
                    console.log("Key:" + key + "\n" + data2.response[0].photo_50);
                  });
                console.log(key);
                console.log(users[key]['vk_id'] + "\n" + users[key]['nickname'] + "\n" + users[key]['balanse']);
                document.getElementById("status" + key).innerHTML = users[key]['nickname'] + " " + users[key]['balanse'];
                document.getElementById("photo" + key).style.display = "block";
              }
            },
            error: function() {
              alert("There was some error performing the AJAX call!");
            }
          }
        );
      }

Но значение key отличаются, когда я делаю запрос с помощью ajax к VK API.
Вот что выводит в консоль.

И при получении фото пользователя key один и тот же, почему?

Answer 1

[Rsa97]

Потому что асинхронность. К моменту прихода данных в .done цикл уже закончил работу и key равно последнему значению.

Comments

[Maxim Plotnikov]

А как можно сделать что бы не было асинхронно?

[Вадим]

самый простой и плохой способ - поставить соответствующий флаг при запросе - async: false

[Maxim Plotnikov]

Вадим, а есть хороший способ?

[Вадим]

Maxim Plotnikov, изучить как работать с асинхронным кодом.
Если Вы в этом вопросе зелёный - то это минимум на недельку. Пока всё в голове не уложится.

[Вадим]

Maxim Plotnikov, Но я на данный момент не пойму другого. Вы спросили "почему отличаются". Ответ был дан. Зачем уходить от асинхронности? Когда все наоборот к ней идут.

[Rsa97]

Maxim Plotnikov, Если сделать не асинхронно, то страница в браузере полностью перестанет реагировать до завершения всех запросов, а браузер будет ругаться на скрипт.
Самый простой способ - использовать замыкание:

for (let key in users) {
  const userKey = key;
  $.ajax({ ... })
    .done((data2) => {
      console.log(`Key: ${userKey}\n${data2.response[0].photo_50}`);
    });
}

[Alex]

Rsa97, Есть способ попроще

for (let key in users) {
  const resp = await fetch(...)
  const data2 = await resp.json() 
  console.log(`Key: ${key }\n${data2.response[0].photo_50}`);
}

Код всё ещё асинхронный, но запросы выполняются последовательно

[Rsa97]

Alex, Если я правильно понял ТС, то задача не последовательные запросы, а сохранение переменной при параллельных запросах.
С последовательными согласен, async/await гораздо проще.

[Павел Корнилов]

Так же по идее должно работать, поскольку done очень похож на первый аргумент в Promise?

function start() {
        update();
        /*let timerId = setInterval(update, 1000);*/
      }

      function update() {
        let now = new Date();
        document.getElementById("time").innerHTML = "Время: " + now;

        $.ajax(
          'get_users.php', {
            success: function(data1) {
              var users = JSON.parse(data1);
              for (key in users) {
              	$.ajax({
                    url: "https://api.vk.com/method/users.get?user_ids=" + users[key]['vk_id'] + "&fields=photo_50&access_token=token&v=5.124",
                    type: 'GET',
                    dataType: 'jsonp'
                  })
                  .done(function(data2) {
                    console.log("Key:" + key + "\n" + data2.response[0].photo_50);

                    console.log(key);
                    console.log(users[key]['vk_id'] + "\n" + users[key]['nickname'] + "\n" + users[key]['balanse']);
                    document.getElementById("status" + key).innerHTML = users[key]['nickname'] + " " + users[key]['balanse'];
                    document.getElementById("photo" + key).style.display = "block";
                  });
                
              }
            },
            error: function() {
              alert("There was some error performing the AJAX call!");
            }
          }
        );
      }