Javascript: Pu sh элементов в списке и печать с задержкой

Question

Я хочу набрать sh элементов в списке, используя для l oop, и печатать каждый шаг с задержкой. Вместо этого я получаю в каждой итерации полный список. Я предполагаю, что это проблема объема, но я не могу найти решение.

Вот мой код:

function printNumber(num,i){

    setTimeout(()=>console.log(num),500*i);
}


let numbers = [50];

for(let i=1; i<=10; i++){

    printNumber(numbers,i);
    numbers.push(i);
}

Answer 1

setTimeout - это таймер. Он будет выполнять все внутри с задержкой. Это не останавливает остальную часть кода. К моменту console.log выполнение вашего массива будет завершено. Таким образом, он напечатает законченный массив.

let numbers = [50];

for(let i=1; i<=10; i++){
     
     setTimeout(()=>{  
       console.log(numbers, i)
       numbers.push(i); 
       
     },500*i);
}

Answer 2

Я думаю, что вы можете искать что-то вроде приведенного ниже фрагмента. Массив включает в себя все значения на каждой итерации, потому что l oop выполняется до завершения, прежде чем setTimeout начнет печатать вещи.

Поскольку массивы хранятся в виде ссылок, num видоизменяется с помощью numbers.push(i).

Передача функции в новый массив каждый l oop решит эту проблему.

function printNumber(num,i){

    setTimeout(()=>console.log(num),500*i);
}


let numbers = [50];

for(let i=1; i<=10; i++){
    // Create new array when you pass it here
    printNumber([...numbers],i);
    numbers.push(i);
}

Answer 3

Это связано с тем, что Javascript передает массивы по ссылке *, что означает, что обратный вызов, который выполняется задолго после завершения l oop, будет указывать на одно и то же обновленное значение массив.

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

printNumber([...numbers], i);

, чтобы он сделал новую копию массива и итерации не мешали друг другу.

* см. Комментарий Брайана Томпсона для уточнения

Answer 4

Вы передаете массив вместо значения.

printNumber(i, i);
//          ^

function printNumber(num, i) {
    setTimeout(() => console.log(num), 500 * i);
}

let numbers = [50];

for (let i = 1; i <= 10; i++) {
    printNumber(i, i);
    numbers.push(i);
}

Если вы хотите показать все собранные числа, вы можете взять копию массива.

function printNumber([...num], i) {
    setTimeout(() => console.log(...num), 500 * i);
}

let numbers = [50];

for (let i = 1; i <= 10; i++) {
    numbers.push(i);
    printNumber(numbers, i);
}