1

помогите разобраться с кодом. Данный код должен печатать цифры от 100 до 0 с задержкой в 20 мс.

Однако при запуске код сто раз печатает цифру "0", с задержкой 20 мс., переменная margin всегда === 0.

const move = (element) => {
    let margin = 100;
    let i = 0;

    while (margin > 0) {
        i++;
        margin -= 1;

        setTimeout(()=> {
            console.log(margin);
        }, 20*i)
    }
} 
move();

Пока писал пост, родилась мысль.

const move = (element) => {
    let margin = 100;
    let i = 0;

    while (margin > 0) {
        i++;
        margin -= 1;

        setTimeout((margin)=> {
            console.log(margin);
        }, 20*i, margin)
    }
} 

move();

Первый код работает неверно, потому что когда первая callback функция попадает из очереди задач в стэк, только тогда console.log() запрашивает значение margin. К этому моменту цикл уже отработал и margin === 0.

Во втором варианте на каждой итерации актуальное значение margin передаётся в функцию setTimeout.

Правильно ли я понимаю, что setTimeout() уходит в какую-то очередь с актуальным значением margin, потом через 20 мс. передаёт callback функцию в callback queue с аргументом margin. Потом функция с правильным аргументом попадает в стэк и там выполняется. Мы видим 99, 98 и т.д. ???

  • Да, можно еще без всяких while) `let margin = 100;

    setTimeout(function bubu() { console.log(margin); if( --margin >= 0 ) setTimeout(bubu, 20); }, 20);`

    – OPTIMUS PRIME Jan 02 '20 at 13:46

0 Answers0