setTimeout() 함수를 순차적으로 사용하는 방법은 무엇입니까?

Question

내가 4 개의 함수를 가지고 있다고 가정 해보면, 각각의 함수는 모두 setTimeout()으로 작업하는 루프를 가지고 있습니다. 해당 함수를 순서대로 실행하고 겹치지 않게하려면 어떻게합니까? 즉, 이전에 완료된 직후에 각각을 어떻게 실행하게합니까?

function1(); 
function2(); 
function3(); 
function4(); 

Answer 1

각 기능이 완료되면 다음 기능을 호출합니다.

"동적"으로 만들려면 함수 대기열을 구현하고 각 함수가 완료되면 대기열에서 다음 함수를 호출하도록합니다. 그런 다음 큐를 채우고 첫 번째 함수를 호출하여 시퀀스 된 프로세스를 시작할 수 있습니다.

Answer 2

function function1(cb) { 
    if (someCondition) { 
     setTimeout(function1, 0); 
    } else { 
     // we are done 
     cb(); 
    } 
} 
... 

function1(function() { 
    function2(function() { 
     function3(function() { 
      function4(); 
     }); 
    }); 
}); 

코드는 당신이 그렇게 Step 같은 flowcontrol의 어떤 종류를 사용하여 너무 깊이 가면 지저분한 받기 시작 않습니다. 노드가 아니라면 단계가 작동하지 않을 수 있습니다.

간단한 큐는 다음과 같을 수 있습니다

var queue = { 
    items: [], 
    add: function() { 
     for (var i = 0; i < arguments.length; i++) { 
      this.items.push(arguments[i]); 
     } 
    }, 
    run: function() { 
     var this = that; 
     this.items.shift()(function() { 
      that.run(); 
     }) 
    } 
}; 

queue.add(function1, function2, function3, function4); 

여기에 각 함수는 첫 번째 인수로 함수 매개 변수 done을해야하고 함수가 완료 될 때 호출되어야한다.

Answer 3

의 배열을 전달할 수 있으며 인수는 배열 자체와 함께 작동합니다.

각각 다음 기능

function fifo(what, delay){ 
    if(what.shift){ 
     var a, f= what.shift() || ''; 
     if(typeof f== 'function') f(); 
     else if(f.constructor== Array){ 
      a= f.splice(1, f.length); 
      f[0].apply(this, a); 
     } 
     if(what.length){ 
      setTimeout(function(){ 
       fifo(what, delay); 
      }, 
      delay); 
     } 

    } 
}; 

function announce(){ 
    return alert(location.href) 
} 
var A= [[alert, 1], [alert, 2], announce, [alert, 'That\'s All!']]; 
fifo(A, 100); 

에 대한 타이머를 설정하기 전에 반환해야합니다