JavaScript 루프에서 지연을 어떻게 추가합니까?

while루프 안에 지연 / 수면을 추가하고 싶습니다 .

나는 이것을 이렇게 시도했다 :

alert('hi');

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

첫 번째 시나리오 만 해당됩니다.를 표시 한 후 alert('hi')3 초 동안 기다렸다가 alert('hello')표시되지만 alert('hello')반복적으로 계속 표시됩니다 .

내가 원하는 것은 after 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
    console.log('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() {
    console.log('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

다음과 같이 해보십시오 :

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

ES6를 사용 let하는 경우 다음 을 수행 하는 데 사용할 수 있습니다 .

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

루프가 아닌 각 반복 에 대해 let선언 i하는 것은 무엇입니까? 이런 식으로 전달되는 것은 우리가 원하는 것입니다.setTimeout

ES7부터 루프 를 기다리는 더 좋은 방법이 있습니다 .

// Returns a Promise that resolves after "ms" Milliseconds
function timer(ms) {
 return new Promise(res => setTimeout(res, ms));
}

async function load () { // We need to wrap the loop into an async function for this to work
  for (var i = 0; i < 3; i++) {
    console.log(i);
    await timer(3000); // then the created Promise can be awaited
  }
}

load();

엔진이 await부품에 도달하면 시간 초과를 설정하고 의 실행을 중지합니다async function . 그런 다음 시간 초과가 완료되면 해당 시점에서 실행이 계속됩니다. (1) 중첩 루프, (2) 조건부, (3) 중첩 함수를 지연시킬 수 있으므로 매우 유용합니다.

async function task(i) { // 3
  await timer(1000);
  console.log(`Task ${i} done!`);
}

async function main() {
  for(let i = 0; i < 100; i+= 10) {
    for(let j = 0; j < 10; j++) { // 1
      if(j % 2) { // 2
        await task(i + j);
      }
    }
  }
}
    
main();

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

MDN에 대한 참조

ES7은 이제 NodeJS 및 최신 브라우저에서 지원되지만 BabelJS 로 변환 하여 어디서나 실행될 수 있습니다.

또 다른 방법은 시간 초과 시간을 곱하는 것이지만 이것은 수면과는 다릅니다 . 루프 후 코드는 즉시 실행되며 콜백 함수 실행 만 지연됩니다.

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

첫 번째 제한이 설정 될 것이다 3000 * 1두 번째로, 3000 * 2등등.

이 작동합니다

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

이 바이올린을 사용해보십시오 : https://jsfiddle.net/wgdx8zqq/

나는 당신이 이와 같은 것을 필요로한다고 생각합니다 :

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;
    }
}

테스트 코드 :

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();

참고 : 경고를 사용하면 경고를 닫을 때까지 자바 스크립트 실행이 중단됩니다. 요청한 것보다 더 많은 코드가있을 수 있지만 이것은 재사용 가능한 강력한 솔루션입니다.

아마 사용할 것입니다 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);

ES6 (ECMAScript 2015)에서는 생성기 및 간격에 따라 지연하여 반복 할 수 있습니다 .

ECMAScript 6의 새로운 기능인 생성기는 일시 중지 및 재개 할 수있는 기능입니다. genFunc를 호출하면 실행되지 않습니다. 대신 genFunc의 실행을 제어 할 수있는 소위 생성기 객체를 반환합니다. genFunc ()는 처음에 본문이 시작될 때 일시 중단됩니다. genObj.next () 메소드는 다음 수율까지 genFunc의 실행을 계속합니다. (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을 사용하는 경우 지연과 함께 루프를 달성하는 가장 우아한 방법입니다 (제 의견으로는).

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>

방금 내 2 센트도 여기에 올릴 줄 알았는데 이 함수는 지연과 함께 반복 루프를 실행합니다. 이 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);
}

나는 이것을 Bluebird Promise.delay와 재귀로 수행합니다.

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>

ES6에서는 다음과 같이 할 수 있습니다.

 for (let i = 0; i <= 10; i++){       
     setTimeout(function () {   
        console.log(i);
     }, i*3000)
 }

ES5에서는 다음과 같이 할 수 있습니다.

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

그 이유는 블록 범위에 관계없이 변수를 전역 적으로 또는 전체적으로 로컬로 정의하는 키워드 let와 달리 블록 문의 범위 또는 var변수 가 사용되는 표현식으로 제한되는 변수를 선언 할 수 있기 때문입니다 .

    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);

Daniel Vassallo의 답변의 수정 된 버전. 변수를 추출하여 함수를보다 재사용 가능하게 만듭니다.

먼저 몇 가지 필수 변수를 정의하겠습니다.

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

다음으로 실행할 기능을 정의해야합니다. 필요한 경우 i, 루프의 현재 인덱스 및 루프 길이를 전달합니다.

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

   let counter =1;
   for(let item in items) {
        counter++;
        setTimeout(()=>{
          //your code
        },counter*5000); //5Sec delay between each iteration
    }

당신은 그것을 할:

console.log('hi')
let start = 1
setTimeout(function(){
  let interval = setInterval(function(){
    if(start == 10) clearInterval(interval)
    start++
    console.log('hello')
  }, 3000)
}, 3000)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

/* 
  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
*/

특정 조건에서 지연되는 지연을 갖는 무한 루프를 만드는 방법은 다음과 같습니다.

  // 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));
    }
  }

여기서 핵심은 시간 초과로 해결되는 새로운 약속을 만들고 해결을 기다리는 것입니다.

분명히 당신은 그것에 대한 비동기 / 대기 지원이 필요합니다. 노드 8에서 작동합니다.

일반적인 사용을 위해 "정상적인 루프를 잊어 버리고"이 "setInterval"조합을 사용하려면 "setTimeOut"을 포함합니다 : (실제 작업에서)

        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)
        }

추신 : (setTimeOut)의 실제 동작을 이해하십시오 : 그들은 모두 동시에 같은 시간에 시작됩니다 "세 개의 bla bla bla는 같은 순간에 카운트 다운을 시작합니다".

PS 2 : 타이밍 루프의 예이지만 반응 루프의 경우 이벤트를 사용할 수 있습니다. 약속 async await ..

내 지식으로는 setTimeout함수가 비동기 적으로 호출됩니다. 할 수있는 일은 전체 루프를 비동기 함수로 감싸고 다음 Promise과 같이 setTimeout이 포함 된 a 를 기다리는 것 입니다.

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;
}

그런 다음 다음과 같이 실행하십시오.

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

비동기 프로그래밍에 대해 잘 이해하려면 약간의 시간이 걸립니다.

이것을 시도하십시오

 var arr = ['A','B','C'];
 (function customLoop (arr, i) {
    setTimeout(function () {
    // Do here what you want to do.......
    console.log(arr[i]);
    if (--i) {                
      customLoop(arr, i); 
    }
  }, 2000);
})(arr, arr.length);

결과

A // after 2s
B // after 2s
C // after 2s

배열을 반복하는 데 사용하는 함수는 다음과 같습니다.

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);
    }
}

당신은 이것을 다음과 같이 사용합니다 :

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 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);
}

루프가 실행되는 동안 2 초마다 텍스트를 표시하는 간단한 구현.

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

이 시도

//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);
  }
}