Задержка вывода чисел на 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 и всё пошло как хотелось))

Новые блоги и статьи Все статьи Все блоги /
Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .	Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.
Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .

Задержка вывода чисел на 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