Не могу понять решение задач(js)?

Question

[EarthFM]

1. Почему получается 10 раз по 10
2. Почему выводится Вася

//1
    for(var i=0; i<10; i++) {
      setTimeout(function() {
        alert(i);
      }, 100);
    }
    
//2
    var name = "Вася";
    function sayHi() {
      alert(name);
    }
    
    setTimeout(function() {
      var name = "Петя";
      sayHi();
    }, 1000);

Comments

[OVK2015]

1. alert выполнится через 100 мс. К этому времени цикл уже давным давно завершен и i, соответственно, равно 10.
2. ф-ция sayHi не находит переменную name внутри себя и ищет ее на уровень вложенности выше. Итого: var name = "Вася";

[EarthFM]

Спасибо)

Answer 1

[Dark Hole]

Это области видимости JS.
Первая - i, когда выполняется функция(через 0.1 сек) уже 10
Вторая - функция как бы сохраняет видимость тогда, когда она создана. Проще говоря, когда функция создавалась, она была глобальной и выводит name глобальной. А в коде вы объявляете локальную переменную name и присвоит ей Петя. Но глобальная переменная name все еще Вася, поэтому выводится Вася.

Понятно?

Comments

[EarthFM]

всё я понял, функция была создана в window. То есть sayHI.[[scope]] = window; И она ищет переменную в window.

[khipster]

Я не понял с setTimeout, там же вроде как асинхронность должна появляться.

[Dark Hole]

khipster: ну да.

[EarthFM]

khipster: Почему не работает setTimeout в цикле for?
setTimeout не блокирует выполнение скрипта, и цикл отрабатывает быстрее любого вызова setTimeout

[Dark Hole]

EarthFM: нет, если 0 передать, то медленнее

[khipster]

EarthFM: А как получить разные i? Т.е. for крутится, а setTimeout создаёт асинхронные функции которые подлавливают текущее значение i и запоминают их. Так не работает:

var arr = [];
for(var i=0; i<100000; i++) {
setTimeout(function() {
arr.push(i);
}, 0);
}
console.log(arr);

Надо мне это подучить.

[khipster]

Dark Hole: Там вроде минимальная задержка 4 миллисекунды.

[EarthFM]

Dark Hole: Я ещё больше запутался)
Я поставил сейчас "0" и всё равно 10 раз по 10.

Если я правильно вас понял, если поставить в setTimeout "0", то хотя бы должен вывести "1", а потом "10", 9 раз.

[Dark Hole]

khipster: а зачем?
for(var i=0; i<10; i++) {
(function(i){setTimeout(function() {
alert(i);
}, 100);
})(i)
}

[khipster]

Dark Hole: Теперь и я запутался. А почему функция в setTimeout не подхватывала i из цикла без обёртки? И почему значения i выводятся в хаотичном порядке: 0, 8, 7, 6, 5...?

[khipster]

Dark Hole: Хочу понять как работает эта асинхронность.

[khipster]

Dark Hole: А, всё понял. Мы создаём 9 функций в которых потом срабатывают таймеры и берут i из замыканий. alert выдаёт в хаотичном порядке, а console.log в правильном. А в моём коде console.log выводил ещё пустой массив до того как туда что то было записано отложенными функциями. И всё равно мне не удаётся обогнать цикл, он срабатывает быстрее 4 миллисекунд. Интересно успеть подхватить i во время работы цикла или это невозможно?

[Aves]

khipster: невозможно, setTimeout ставит функцию в очередь, а текущий код работает синхронно, задание из очереди будет взято только после окончания текущего, даже если цикл займёт 10 секунд
гуглить javascript event loop

[Dark Hole]

Aves: ну да. Цикл - одна очередь

[khipster]

Aves: Всё понял. Спасибо. Помню когда то это учил, но забыл.

[EarthFM]

khipster: Так работает)

for(let i=0; i<10; i++) {
setTimeout(function() {
console.log(i);
}, 100);
}

[khipster]

EarthFM: let это что то плохое.

[EarthFM]

khipster: let это будущие, которое уже наступило)

[Dark Hole]

EarthFM: не везде. У меня не во всех браузерах

Answer 2

[khipster]

Я подведу итог для тех кто наткнётся на этот вопрос через поиск.

1. Неверно дают ответ что мол цикл успевает досчитать до 10. Цикл может продолжаться сколько угодно, но в очереди он стоит первым и поэтому пока он не закончится отложенная функция не сработает. Такая вот асинхронность в js: одна большая очередь за молоком из которой ты можешь только выпасть в самый конец, а асинхронно отойти покурить, а потом попытаться пролезть вперёд какой нибудь бабульки не получится, т.к. огреет бидоном по башке.

2. При создании функция получает скрытое свойство [[Scope]], которое ссылается на лексическое окружение, в котором она была создана. Это свойство никогда не меняется. Оно всюду следует за функцией, привязывая её, таким образом, к месту своего рождения. Поэтому sayHi() выводит "Васю". Как говорится где родился - там и пригодился.

Comments

[Aves]

цикл синхронный, он к очереди не относится

[khipster]

Aves: я читал что в main loop становится любой код, который желает выполниться, как одна большая очередь.

[Aves]

khipster: есть разница между текущим кодом и кодом в очереди.
Нужно понимать, что javascript однопоточный и синхронный, код выполняется сразу от начала и до конца. А асинхронность это отдельный дополнительный механизм, реализуемый очередью событий.

[khipster]

Aves: в данном случае речь идёт о main loop, а не о event loop. ведь в данном примере событий вообще нет.

[Aves]

khipster: именно о event loop в данном примере идёт речь

[khipster]

Aves: но ведь for в очереди событий вообще нет, а вот в основном цикле он есть и стоит перед отложенной функцией. т.е. если говорить о цикле событий то там нет очереди.