Задержка вывода чисел на 1 секунду

@LFC · Регистрация: 17.09.2015

Студворк — интернет-сервис помощи студентам

пример из букваря выводит числа от 0 до 9 в ряд

JavaScript
1
2
3
4
var i;
for (i = 0; i < 10; i++) {
    document.getElementById("demo").innerHTML += i + " ";
}

я хочу добавить задержку вывода каждого числа на 1 сек

JavaScript
1
2
3
4
var i;
for (i = 0; i < 10; i++) {
    setTimeout(function(){document.getElementById("demo").innerHTML += i + " "}, 1000);
}

но выводит с задержкой сразу всю строку 10 10 10 10 10 10 10 10 10 10
вопрос:
1.Почему выводится число 10, а не 0 1 2 3 4 5 и т.д.?
2.Задержка должна выполняться каждую итерацию цикла,почему она выполняется только один раз?
3.Что я делаю не так?

@j2FunOnly · 19.04.2017, 08:34

Сообщение от LFC

Задержка должна выполняться каждую итерацию цикла,почему она выполняется только один раз?

setTimeout - это не совсем задержка, как принято в некоторых других ЯП (sleep, pause, etc...). Это, грубо говоря, отложенное выполнение функции в "отдельном потоке выполнения".

То есть в вашем примере в цикле сразу установятся 10 функций на выполнение через 1 секунду. Следовательно, когда эта секунда пройдет, i будет уже равным 10 и все 10 отложенный функций выполнятся одновременно (почти одновременно, но не будем занудствовать).

Если вы хотите именно в цикле установить такой порядок выполнения, то надо с каждой итерацией увеличивать таймаут и "фиксировать" значение i, например с помощью IIFE:

JavaScript
1
2
3
4
5
6
7
8
var i;
for (i = 0; i < 10; i++) {
  (function (i) {
    setTimeout(function () {
      document.getElementById("demo").innerHTML += i + " "
    }, 1000 * i + 1);
  })(i);
}

Но не буду усложнять, в setTimeout можно передать параметры, с которыми "отложенная" функция выполнится:

JavaScript
1
2
3
4
5
6
var i;
for (i = 0; i < 10; i++) {
  setTimeout(function (i) {
    document.getElementById("demo").innerHTML += i + " "
  }, 1000 * i + 1, i);
}

Хотя можно вызывать setTimeout рекурсивно и убрать цикл:

JavaScript
1
2
3
4
5
6
setTimeout(function tick (i) {
  document.getElementById("demo").innerHTML += i++ + " "
  if (10 == i) return;
 
  setTimeout(tick, 1000, i);
}, 1000, 0)

Здесь не плохо рассказано про setTimout и setInterval.

@cyb0rg_01 · 19.04.2017, 08:38

https://jsfiddle.net/ry1twsna/

JavaScript
1
2
3
4
5
6
var i;
for (i = 0; i < 10; i++) {
    (function(index){
        setTimeout(function(){document.getElementById("demo").innerHTML += index + " "}, 1000);
    })(i);
}

Причина в том, что значение переменной i изменяется.

@Shakalaka · 19.04.2017, 08:44

Сообщение от LFC

1.Почему выводится число 10, а не 0 1 2 3 4 5 и т.д.?

Потому что операция setTimeout выполнится с задержкой, к тому времени цикл совершит все итерации, переменная i - одна общая для всех вызовов вашего коллбэка в setTimeout и к тому времени как сработает ее вызов i уже будет равна 10

Сообщение от LFC

2.Задержка должна выполняться каждую итерацию цикла,почему она выполняется только один раз?

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

JavaScript
1
setTImeout(function(){}, (i + 1) * 1000)

Сообщение от LFC

3.Что я делаю не так?

Оберните каждый вызов вашего таймаута в IIFE и передавайте в неё переменную i

JavaScript
1
2
3
4
5
6
var i;
for (i = 0; i < 10; i++) {
   (function(i){
      setTimeout(function(){document.getElementById("demo").innerHTML += i + " "}, 1000 * (i + 1));
   })(i)
}

Или ES6

JavaScript
1
2
3
for (let i = 0; i < 10; i++) {
    setTimeout(() => console.log(i), 1000 * (i + 1));
}

Но по-сути там произойдет то же самое

@LFC · 19.04.2017, 16:16 **[ТС]**

является ли это затруднение проявлением асинхронности JS?

Добавлено через 3 минуты
pro_100_gram, ваш код тоже делает одну задержку и потом выводит всю строку сразу.А вот если 1000 заменить на 1000 * i то всё ОК

@cyb0rg_01 · 19.04.2017, 16:40

LFC, второй параметр различается, м.б из-за этого

@LFC · 19.04.2017, 16:57 **[ТС]**

pro_100_gram, ну,например тестирую этот код

JavaScript
1
2
3
4
5
6
var i;
for (i = 0; i < 10; i++) {
  setTimeout(function (i) {
    document.getElementById("demo").innerHTML += i + " "
  }, 1000 * i + 1, i);
}

мгновенно печатается 0,через секунду 1,еще через секунду 2 и т.д.
а ваш код -сначала ничего нет,примерно секунду-полторы,потом появляется одновременно вся строка 0 1 2 3 4 5 6 7 8 9

Добавлено через 1 минуту

Сообщение от pro_100_gram

м.б из-за этого

ну,да,я так и подумал,добавил к 1000 умножение на i и всё пошло как хотелось))

Новые блоги и статьи Все статьи Все блоги /
Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .	Фото: Daniel Greenwood kumehtar 13.11.2025

Задержка вывода чисел на 1 секунду

Решение

Решение

@LFC 738 / 543 / 416 Регистрация: 17.09.2015 Сообщений: 1,601
	19.04.2017, 16:16 [ТС]
	является ли это затруднение проявлением асинхронности JS? Добавлено через 3 минуты pro_100_gram, ваш код тоже делает одну задержку и потом выводит всю строку сразу.А вот если 1000 заменить на 1000 * i то всё ОК 0

@cyb0rg_01 Фрилансер 735 / 352 / 96 Регистрация: 05.05.2014 Сообщений: 2,621
	19.04.2017, 16:40
	LFC, второй параметр различается, м.б из-за этого 0