Почему глобальная переменная не меняется внутри функции?

Question

[Senseich]

Всем привет! Сразу скажу, я не владею js, только базовый уровень, использую чтобы выцепит инфу по работе.

Написал скрипт для вывода необходимых ссылок со страницы, но не понимаю почему в консоль не выводится переменная silkaNew , которая меняется в методе $.get
Вроде делал по правилам, объявил глобально и использовал в функции, но в консоль выводится значение, которое присвоено изначально.
Что я не так делаю, подскажите пож-та?

var arr= [некий массив артикулов];

for(let i = 0; i < arr.length; i++){
  
  var elem = arr[i];
  var link = 'ссылка' + elem;
  var silkaNew = '';
  
        $.get(link, function(data) {

            var $obj = $(data);
          
            var silka = $obj.find('a.catalog-card__link.text-gray-dark').attr('href');
                silkaNew = 'https://сайт.ru' + silka;

             }
          )

console.log(elem + '# ' + silkaNew);
   
}

Мне главное чтобы выводило эту связку elem + '# ' + silkaNew .. я конечно пробовал выводить console.log внутри метода get, но тогда обратная проблема: silkaNew выводится как надо, а переменная elem у всех одинаковая вывдится и равна последнему элементу в массиве, тоже не понимаю почему так.

Comments

[Алексей Дубровин]

$.get - промис. Он работает асинхронно.

Answer 1

[betterthanyouthink]

допишите .done() после $.get и выводите console.log там

https://api.jquery.com/jquery.get/

Comments

[betterthanyouthink]

В вашем случае код будет выглядеть примерно так
<code lang="javascript">
$.get(link)
 .done(function(data) {
  var $obj = $(data);
  var silka = $obj.find('a.catalog-card__link.text-gray-dark').attr('href');
  silkaNew = 'https://сайт.ru' + silka;
  console.log(elem + '# ' + silkaNew)
})
</code>

[betterthanyouthink]

Извиняюсь, код выше вам будет выдавать одно и то же значение elem. Чтобы избежать этого, используйте let elem = arr[i]; вместо var elem = arr[i];
либо, если хотите использовать var, оберните вызов $.get в функцию

(function(elem) {
    // код c $.get здесь
})(arr[i]);

[Senseich]

betterthanyouthink, Спасибо, всё работает, использовал let.
А как работает последняя функция, которую вы написали, не совсем понимаю. Т.е. я объявляю переменную, она используется как аргумент в функции, а зачем на конце (arr[i]) не понимаю )

var elem = arr[i];

(function(elem) {
    // код c $.get здесь
})(arr[i]);

[betterthanyouthink]

Senseich, тут произошла небольшая путаница) я поставил arr[i], чтобы меньше вас запутать, но получилось наоборот.

Переменная, которую вы объявили, не используется как аргумент в функции (просто название одинаковое - аргумент может называться как угодно). C вашей переменной elem мы должны вызвать функцию. Т.e. запись может быть такой:

var elem = arr[i];

(function(argumentName) {
    // код c $.get здесь
})(elem);

Т.e., это то же самое, если бы у нас была функция function test (argumentName) { ... code } и мы бы ее вызвали так: test(elem), просто тут фишка в том, что тип функции, из моего примера - IIFE и он может сбивать с толку своей записью.

Эта функция выполняется сразу же после того, как она была определена.
https://developer.mozilla.org/ru/docs/Glossary/IIFE

А для того, чтобы понять, почему такое решение помогает при использовании var - вам надо почитать, как работает var и чем он отличается от let.

Еще можете почитать про замыкания - https://learn.javascript.ru/closure , возможно, поможет в будущем. Успехов!

[Senseich]

betterthanyouthink, ок, спасибо за ответ, буду учить азы языка, а то всё кусками приходилось узнавать )

[Владимир]

Senseich,
https://developer.mozilla.org/en-US/docs/Glossary/IIFE
Найдите время и почитайте
https://www.yakaboo.ua/ua/javascript-polnoe-rukovo...
Ну или
https://github.com/getify/You-Dont-Know-JS/blob/1s...

Answer 2

[Владимир]

Коллбек в $.get(link, выполняется позже чем console.log(elem + '# ' + silkaNew);
Если хотите писать на JS нужно понять и принять понятие "асинхронный код"
Выше уже написали, что в этом случае нужно использовать done