. Я бы хотел добавить задержку / сон внутри while жирным шрифтом

. Он был создан после вызова

alert('hi');

for(var start = 1; start < 10; start  ) {
  setTimeout(function () {
    alert('hello');
  }, 3000);
}

Только первый сценарий верен: после показа alert('hi'), он будет ждать 3 секунды, затем alert('hello') также будет работать, как и ожидалось, alert('hello') будет повторяться постоянно.

символ был невидим, сделайте, как мы узнаем, что он там? Вы можете попросить своего редактора показать невидимых символов. Большинство текстовых редакторов имеют эту функцию. Например, Vim отображает их по умолчанию, а alert('hello') отображается через 3 секунды после alert('hi'), затем нужно подождать 3 секунды во второй раз alert('hello') и так далее.

Переменная setTimeout() функция неблокирующая и немедленно вернется. Поэтому ваш цикл будет повторяться очень быстро, и он будет запускать 3-секундные триггеры тайм-аута один за другим в быстрой последовательности. Вот почему ваши первые оповещения появляются через 3 секунды, а все остальные следуют по очереди без каких-либо задержек.

Возможно, вы захотите использовать что-то вроде этого:

var i = 1;                     //  set your counter to 1

function myLoop () {           //  create a loop function
   setTimeout(function () {    //  call a 3s setTimeout when the loop is called
      alert('hello');          //  your code here
      i  ;                     //  increment the counter
      if (i < 10) {            //  if the counter < 10, call the loop function
         myLoop();             //  ..  again which will trigger another 
      }                        //  ..  setTimeout()
   }, 3000)
}

myLoop();                      //  start the loop

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

(function myLoop (i) {          
   setTimeout(function () {   
      alert('hello');          //  your code here                
      if (--i) myLoop(i);      //  decrement i and call myLoop again if i > 0
   }, 3000)
})(10);                        //  pass the number of iterations as an argument

Событие javascript

var i = 0, howManyTimes = 10;
function f() {
    alert( "hi" );
    i  ;
    if( i < howManyTimes ){
        setTimeout( f, 3000 );
    }
}
f();

Если вы используете ES6, вы можете использовать let Firefox делает это по умолчанию, потому что открывает страницу в новом окне раздражает, и страница никогда не должна делать этого, если пользователь этого не желает. (Firefox позволяет открывать вкладки в новом окне, если вы установите его таким образом).

for (let i=1; i<10; i  ) {
    setTimeout( function timer(){
        alert("hello world");
    }, i*3000 );
}

What let действительно, это объявить i для каждого итерацию , а не цикл. Таким образом, то, что передается в setTimeout это именно то, что мы хотим. Глобальная переменная выражения

Так как ES7 есть лучший способ Кодировать URL в JavaScript? — Переполнение стека цикл:

function timer(ms) {
 return new Promise(res => setTimeout(res, ms));
}

async function load () {
  for (var i = 0; i < 3; i  ) {
    console.log(i);
    await timer(3000);
  }
}

load();

typeof (Function)

Обратите внимание, что ES7 сегодня редко поддерживается, поэтому вам нужно использовать Babel для его повсеместного использования.

setTimeout(r,v));
}

async function load () {
for (var i = 0; i Транспилировано

Другой способ — увеличить время ожидания , но учтите, что это не люблю спать. Код после цикла будет выполнен немедленно, только выполнение функции обратного вызова откладывается.

for (var start = 1; start < 10; start  )
    setTimeout(function () { alert('hello');  }, 3000 * start);

Первый таймаут будет установлен на 3000 * 1. Или, что еще лучше, у вас будет ссылка действия по умолчанию в HTML, и вы добавите событие onclick в элемент незаметно с помощью JavaScript после рендеринга DOM, таким образом гарантируя, что если JavaScript не присутствует / не используется, у вас не будет бесполезных обработчиков событий, которые запутывают ваш код и потенциально запутывают (или, по крайней мере, отвлекают) ваш фактический контент. 3000 * 2 и так далее.

ОК, я передумал. Я добавил дополнительную функцию для заполнения нулями. Проклятия!

var TimedQueue = function(defaultDelay){
    this.queue = [];
    this.index = 0;
    this.defaultDelay = defaultDelay || 3000;
};

TimedQueue.prototype = {
    add: function(fn, delay){
        this.queue.push({
            fn: fn,
            delay: delay
        });
    },
    run: function(index){
        (index || index === 0) && (this.index = index);
        this.next();
    },
    next: function(){
        var self = this
        , i = this.index  
        , at = this.queue[i]
        , next = this.queue[this.index]
        if(!at) return;
        at.fn();
        next && setTimeout(function(){
            self.next();
        }, next.delay||this.defaultDelay);
    },
    reset: function(){
        this.index = 0;
    }
}

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

var now =  new Date();

var x = new TimedQueue(2000);

x.add(function(){
    console.log('hey');
    console.log( new Date() - now);
});
x.add(function(){
    console.log('ho');
    console.log( new Date() - now);
}, 3000);
x.add(function(){
    console.log('bye');
    console.log( new Date() - now);
});

x.run();

Примечание. Использование предупреждений останавливает выполнение JavaScript, пока вы не закроете оповещение. может быть больше кода, чем вы просили, но это надежное решение для повторного использования.

Я бы, вероятно, использовал setInteval Этот метод может быть применен в

var period = 1000; // ms
var endTime = 10000;  // ms
var counter = 0;
var sleepyAlert = setInterval(function(){
    alert('Hello');
    if(counter === endTime){
       clearInterval(sleepyAlert);
    }
    counter  = period;
}, period);

Это сработает

for (var i = 0; i < 10; i  ) {
    (function(i) {
        setTimeout(function() { console.log(i); }, 100 * i);
    })(i);
}

Попробуйте эту скрипку: https://jsfiddle.net/wgdx8zqq/

В ES6 (ECMAScript 2015) вы можете выполнять итерации с задержка с generator и интервале.

https://code.google.com/p/chromium/issues/detail?id=373182 (Изучение ES6)

Пример кода:

let arr = [1, 2, 3, 'b'];
let genObj = genFunc();

let val = genObj.next();
console.log(val.value);

let interval = setInterval(() => {
  val = genObj.next();
  
  if (val.done) {
    clearInterval(interval);
  } else {
    console.log(val.value);
  }
}, 1000);

function* genFunc() {
  for(let item of arr) {
    yield item;
  }
}

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

Я делаю это с помощью Promise.delay и рекурсии Bluebird.

function myLoop(i) {
  return Promise.delay(1000)
    .then(function() {
      if (i > 0) {
        alert('hello');
        return myLoop(i -= 1);
      }
    });
}

myLoop(3);
<script src="//cdnjs.cloudflare.com/ajax/libs/bluebird/2.9.4/bluebird.min.js"></script>

Вы можете использовать оператор интервала RxJS Оператор интервала . Интервал испускает целое число каждые x секунд, а take указывает, сколько раз он должен генерировать

Rx.Observable
  .interval(1000)
  .take(10)
  .subscribe((x) => console.log(x))
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.1.0/rx.lite.min.js"></script>

Просто подумал, что я также опубликую здесь свои два цента. Эта функция запускает итерационный цикл с задержкой. См. this jsfiddle . Функция выглядит следующим образом:

function timeout(range, time, callback){
    var i = range[0];                
    callback(i);
    Loop();
    function Loop(){
        setTimeout(function(){
            i  ;
            if (i<range[1]){
                callback(i);
                Loop();
            }
        }, time*1000)
    } 
}

Например:

//This function prints the loop number every second
timeout([0, 5], 1, function(i){
    console.log(i);
});

По существу, функциональный блок гарантирует, что все зависимые «глобальные переменные», которые вы определили, ограничены в вашей программе она не защищает вас от определения неявных глобальных переменных.

//This function prints the loop number instantly
for (var i = 0; i<5; i  ){
    console.log(i);
}
    var startIndex = 0;
    var data = [1, 2, 3];
    var timeout = 1000;

    function functionToRun(i, length) {
      alert(data[i]);
    }

    (function forWithDelay(i, length, fn, delay) {
      setTimeout(function() {
        fn(i, length);
        i  ;
        if (i < length) {
          forWithDelay(i, length, fn, delay);
        }
      }, delay);
    })(startIndex, data.length, functionToRun, timeout);

Модифицированная версия ответа Даниэля Вассалло, с переменными, извлеченными в параметры, чтобы сделать функцию более пригодной для повторного использования: Сначала давайте определим некоторые существенные переменные:

совместимость

var startIndex = 0;
var data = [1, 2, 3];
var timeout = 3000;

Надеюсь, это поможет!

function functionToRun(i, length) {
    alert(data[i]);
}

Самоисполняющаяся версия

(function forWithDelay(i, length, fn, delay) {
   setTimeout(function () {
      fn(i, length);
      i  ;
      if (i < length) {
         forWithDelay(i, length, fn, delay); 
      }
  }, delay);
})(startIndex, data.length, functionToRun, timeout);

объявления переменных также создают свойства

function forWithDelay(i, length, fn, delay) {
   setTimeout(function () {
      fn(i, length);
      i  ;
      if (i < length) {
         forWithDelay(i, length, fn, delay); 
      }
  }, delay);
}

forWithDelay(startIndex, data.length, functionToRun, timeout); // Lets run it
/* 
  Use Recursive  and setTimeout 
  call below function will run loop loopFunctionNeedCheck until 
  conditionCheckAfterRunFn = true, if conditionCheckAfterRunFn == false : delay 
  reRunAfterMs miliseconds and continue loop
  tested code, thanks
*/

function functionRepeatUntilConditionTrue(reRunAfterMs, conditionCheckAfterRunFn,
 loopFunctionNeedCheck) {
    loopFunctionNeedCheck();
    var result = conditionCheckAfterRunFn();
    //check after run
    if (!result) {
        setTimeout(function () {
            functionRepeatUntilConditionTrue(reRunAfterMs, conditionCheckAfterRunFn, loopFunctionNeedCheck)
        }, reRunAfterMs);
    }
    else  console.log("completed, thanks");    
            //if you need call a function after completed add code call callback in here
}

//passing-parameters-to-a-callback-function
// From Prototype.js 
if (!Function.prototype.bind) { // check if native implementation available
    Function.prototype.bind = function () {
        var fn = this, args = Array.prototype.slice.call(arguments),
            object = args.shift();
        return function () {
            return fn.apply(object,
              args.concat(Array.prototype.slice.call(arguments)));
        };
    };
}

//test code: 
var result = 0; 
console.log("---> init result is "   result);
var functionNeedRun = function (step) {           
   result =step;    
       console.log("current result is "   result);  
}
var checkResultFunction = function () {
    return result==100;
}  

//call this function will run loop functionNeedRun and delay 500 miliseconds until result=100    
functionRepeatUntilConditionTrue(500, checkResultFunction , functionNeedRun.bind(null, 5));

//result log from console:
/*
---> init result is 0
current result is 5
undefined
current result is 10
current result is 15
current result is 20
current result is 25
current result is 30
current result is 35
current result is 40
current result is 45
current result is 50
current result is 55
current result is 60
current result is 65
current result is 70
current result is 75
current result is 80
current result is 85
current result is 90
current result is 95
current result is 100
completed, thanks
*/

поддерживается только в Chrome и Opera

  // Now continuously check the app status until it's completed, 
  // failed or times out. The isFinished() will throw exception if
  // there is a failure.
  while (true) {
    let status = await this.api.getStatus(appId);
    if (isFinished(status)) {
      break;
    } else {
      // Delay before running the next loop iteration:
      await new Promise(resolve => setTimeout(resolve, 3000));
    }
  }

Я удивлен, что не видел этого, потому что он работает везде, где я его тестировал, и очень полезен, например, для шаблонов:

может в конечном итоге не быть реализованным другими браузерами

является источником переменной значения

        function iAsk(lvl){
            var i=0;
            var intr =setInterval(function(){ // start the loop 
                i  ; // increment it
                if(i>lvl){ // check if the end round reached.
                    clearInterval(intr);
                    return;
                }
                setTimeout(function(){
                    $(".imag").prop("src",pPng); // do first bla bla bla after 50 millisecond
                },50);
                setTimeout(function(){
                     // do another bla bla bla after 100 millisecond.
                    seq[i-1]=(Math.ceil(Math.random()*4)).toString();
                    $("#hh").after('<br>' i   ' : rand= ' (Math.ceil(Math.random()*4)).toString() ' > ' seq[i-1]);
                    $("#d" seq[i-1]).prop("src",pGif);
                    var d =document.getElementById('aud');
                    d.play();                   
                },100);
                setTimeout(function(){
                    // keep adding bla bla bla till you done :)
                    $("#d" seq[i-1]).prop("src",pPng);
                },900);
            },1000); // loop waiting time must be >= 900 (biggest timeOut for inside actions)
        }

Вы можете создать приложение для Windows, Linux или Mac для настольного компьютера, которое не требует установки.

:

<!DOCTYPE html>
<html>
<body>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
    for(var i=0; i<5; i  ) {
    	var sno = i 1;
       	(function myLoop (i) {          
             setTimeout(function () {   
             	alert(i); // Do your function here 
             }, 1000*i);
        })(sno);
    }
}
</script>

</body>
</html>

). Подробнее см.

for (var i = 0; i < foo.length; i  ) {
   setInterval(function(){ 
     console.log("I will appear every 2 seconds"); 
   }, 2000);
  break;
};

Если вы хотите использовать карусель, просто используйте setTimeout. Promise, который содержит setTimeout, как показано:

var looper = async function () {
  for (var start = 1; start < 10; start  ) {
    await new Promise(function (resolve, reject) {
      setTimeout(function () {
        console.log("iteration: "   start.toString());
        resolve(true);
      }, 1000);
    });
  }
  return true;
}

А затем вы вызываете run it следующим образом:

looper().then(function(){
  console.log("DONE!")
});

Пожалуйста, уделите некоторое время, чтобы получить хорошее представление об асинхронном программировании.

Firefox использует

function loopOnArrayWithDelay(theArray, delayAmount, i, theFunction, onComplete){

    if (i < theArray.length && typeof delayAmount == 'number'){

        console.log("i " i);

        theFunction(theArray[i], i);

        setTimeout(function(){

            loopOnArrayWithDelay(theArray, delayAmount, (i 1), theFunction, onComplete)}, delayAmount);
    }else{

        onComplete(i);
    }
}

http://tomriley.net/blog/archives/111

loopOnArrayWithDelay(YourArray, 1000, 0, function(e, i){
    //Do something with item
}, function(i){
    //Do something once loop has completed
}

Этот скрипт работает для большинства вещей

function timer(start) {
    setTimeout(function () { //The timer
        alert('hello');
    }, start*3000); //needs the "start*" or else all the timers will run at 3000ms
}

for(var start = 1; start < 10; start  ) {
    timer(start);
}
var timer, i = 10;
function myLoop () { //  create a loop function
  timer = setTimeout(function () {   
    document.getElementById("demo").innerHTML = i;
   
    i--;                    
    if (i >= 0) {            
      myLoop();              
    } else {               
      clearTimeout(timer); // clear timeout
      document.getElementById("demo").innerHTML = "DOARRRR ..";
    }
   
  }, 1000);
}

myLoop();
<p id="demo">count</p>

Попробуйте это …

var icount=0;
for (let i in items) {
   icount=icount 1000;
   new beginCount(items[i],icount);
}

function beginCount(item,icount){
  setTimeout(function () {

   new actualFunction(item,icount);

 }, icount);
}

function actualFunction(item,icount){
  //...runs ever 1 second
 console.log(icount);
}

Попробуйте это

//the code will execute in 1 3 5 7 9 seconds later
function exec(){
  for(var i=0;i<5;i  ){
   setTimeout(function(){
     console.log(new Date());   //It's you code
   },(i i 1)*1000);
  }
}