Как использовать setTimeout для задержки счетчика приращений в цикле? [Дубликат]

Question

Как использовать setTimeout для задержки счетчика приращений в цикле? [Дубликат]

1

Я хочу использовать setTimeout для задержки счетчика приращений в цикле, чтобы менять изображение каждые секунды. Я пытаюсь задержать updatePic() использовать setTimeout, но он тоже не работает. Пожалуйста помоги. Благодарю.

Мой код JS:

function picAnimation() {
    //var pic = document.getElementById('pic').src;
    for(i = 2; i < 25; ) {  
        updatePic(i);       
        setTimeout(function() {increment(i);} , 1000);
    }
}

function updatePic(i) {
    if(i > 9) {
        document.getElementById('pic').src = "./animation/0" + i + ".png";
    } else {
        document.getElementById('pic').src = "./animation/00" + i + ".png";
    }
}

function increment(i) {
    i++;
}


picAnimation();

Мой html-код:

<center><img id = "pic" src="./animation/001.png" alt="N/A" width="800" height="300"></center>

buzzmind 10 май 2018, в 20:12

Источник

1

Вы не увеличиваете свою переменную цикла и поэтому получаете бесконечный цикл.
Scott Marcus 10 май 2018, в 17:54
0

Вы создаете кучу элементов, которые будут выполняться за одну секунду, и вам не хватает приращения. Я не уверен, какова ваша цель, но я предполагаю, что цикл for - это не то, что вы ищете.
epascarello 10 май 2018, в 17:55

Теги:

javascript

settimeout

3 ответа

0

Я бы использовал рекурсию - не для цикла.

function doSomething (counter) {
    // Terminal case
    if (counter === 25) {
        return;
    }
    // Do work here

    // Schedule the next.
    setTimeout(doSomething, delay, ++counter)
}

// Then start the process 
doSomething(0);

alex 10 май 2018, в 16:46

1

Таймер обратного отсчета будет более гибким.
Scott Hunter 10 май 2018, в 17:58

0

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

function loopUntilFalse (delay, fn) {
  if (fn() !== false) setTimeout(loopUntilFalse, delay, delay, fn);
}

var animated = 0;
function picAnimation() {
  if (animated >= 25) return false;
  updatePic(animated);
  animated++;
}

picAnimation();

Joe Frambach 10 май 2018, в 15:28

Ещё вопросы

Вы не увеличиваете свою переменную цикла и поэтому получаете бесконечный цикл.
Вы создаете кучу элементов, которые будут выполняться за одну секунду, и вам не хватает приращения. Я не уверен, какова ваша цель, но я предполагаю, что цикл for - это не то, что вы ищете.
Таймер обратного отсчета будет более гибким.

Neal_Nicdao · Accepted Answer · 2018-05-10T16-54-00.000Z

Цикл for не является правильным утверждением для использования в этом случае. Цикл не дождался завершения setTimeout, вызвав updateLoop и setTimeout 23 раза почти мгновенно. setTimeout - это функция, которая вызывает функцию в первом аргументе после заданного количества миллисекунд.

Кроме того, функция приращения не изменяет значение i; JS копирует данные, увеличивает копию, затем отбрасывает ее. Что-то подобное возможно в C++, но не в JS.

Вместо этого вы должны использовать setTimeout для вызова picAnimation.

function picAnimation(i) {
    updatePic(i);
    if (i < 25)
        setTimeout(function() {picAnimation(i + 1)}, 1000);
}
picAnimation(2);