Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.10.2016, 18:19
Новичок на форуме
Отправить личное сообщение для vlad35 Посмотреть профиль Найти все сообщения от vlad35
 
Регистрация: 22.10.2016
Сообщений: 9

Как совместить setTimeout и цикл for?
Здравствуйте, уважаемые форумчане! Есть div, который должен менять фон через каждую секунду. Теперь нужно, используя цикл for при каждом прохождении цикла сделать задержку каждого цвета на одну секунду с помощью setTimeout.
Дело в том, что цикл for выдает только последнее прохождение и не хочет задерживаться на каждом цвете. Поискал ответ в интернете, пришел к такому написанию скрипта:

<div style="width:300px; height:300px; background-color:red;" id="col"></div>
<script type="text/javascript">
var color = ["green", "blue", "red", "orange"];
var el = document.getElementById('col');
var max = color.length-1;

for(var i=0; i<=max; i++) {
(function(i){
setTimeout(function(){
el.style.background = color[i];
}, 1000);
})(i);
}
</script>

Но он тоже почему-то не работает. Подскажите, пожалуйста, как все-таки в моем скрипте совместить for и setTimeout.
Ответить с цитированием
  #2 (permalink)  
Старый 22.10.2016, 18:33
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,589

Как? Никак.
Цикл выполняется сейчас и только сейчас, таймаут выполняется потом.

Таймаут должен вызывать функцию, которая вызывает следующий таймаут.
__________________
29375, 35
Ответить с цитированием
  #3 (permalink)  
Старый 22.10.2016, 19:38
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

vlad35,
как вариант...
<div style="width:300px; height:300px; background-color:red;" id="col"></div>
	<script>
	let color = ["green", "blue", "red", "orange"],
	el = document.querySelector('#col'),
	requests = color.reduce((promiseChain, item) => {
		return promiseChain.then(() => new Promise(resolve => {
		  setTimeout(() => (el.style.background = item) && resolve(), 1000)
		}));
	}, Promise.resolve());	
	</script>
Ответить с цитированием
  #4 (permalink)  
Старый 22.10.2016, 19:58
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

<div style="width:300px; height:300px; background-color:red;" id="col"></div>
<script>
const el = document.getElementById('col');
let iterator = next();
function* next() {
const arr = ["green", "blue", "red", "orange"];
  for (var i = 0; i <= arr.length;) {
    yield arr[i++];
  }
}
  (function newBackground() {
    let color = iterator.next().value;
    if (color) {
      el.style.background = color;
      setTimeout(newBackground, 1000);
    }
  }());
</script>

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

Последний раз редактировалось Vlasenko Fedor, 22.10.2016 в 20:11.
Ответить с цитированием
  #5 (permalink)  
Старый 22.10.2016, 20:02
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,589

Poznakomlus, годный овермайнд.))
__________________
29375, 35
Ответить с цитированием
  #6 (permalink)  
Старый 22.10.2016, 20:13
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

Aetae,
особо не понял зачем ТС эти варианты
http://www.cyberforum.ru/javascript-...ad1830841.html
Ответить с цитированием
  #7 (permalink)  
Старый 22.10.2016, 20:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124


<div style="width:300px; height:300px; background-color:red;" id="col"></div>
  <script>
  var color = ["green", "blue", "red", "orange"],
  el = document.querySelector('#col');
  (function f() {
   var item = color.shift();
   item && (el.style.background = item) && setTimeout(f, 1000)
  }())
  </script>
Ответить с цитированием
  #8 (permalink)  
Старый 22.10.2016, 20:57
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

рони,
Сообщение от vlad35
нужно, используя цикл for

Сообщение от vlad35 Посмотреть сообщение
совместить for и setTimeout.
Ответить с цитированием
  #9 (permalink)  
Старый 22.10.2016, 21:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124

Poznakomlus,
ок. но но зачем усложнять
Сообщение от Aetae
Цикл выполняется сейчас и только сейчас, таймаут выполняется потом.

Таймаут должен вызывать функцию, которая вызывает следующий таймаут.
Ответить с цитированием
  #10 (permalink)  
Старый 22.10.2016, 21:38
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

Сообщение от рони
Цикл выполняется сейчас и только сейчас
может стоит задача написания кода с использованием генераторов
Сообщение от Poznakomlus
особо не понял зачем ТС эти варианты
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Подскажите, как создать хэш таблицу (или массив) через цикл osetr Общие вопросы Javascript 6 11.11.2014 12:08
как правильно задать цикл wadim Общие вопросы Javascript 4 05.03.2014 21:19
Как сделать цикл for столько сколько нужно(Самостоятельным) f0stgis Общие вопросы Javascript 3 25.02.2014 16:26
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29
Как завершить Settimeout() ? libinstyle Events/DOM/Window 7 29.03.2010 12:40