은에서는 setTimeout 후 호출 - 자바 스크립트

Question

를 I 다음 코드 조각 가지고

var gradient = new Gradient(element, [0, 0.99]); 
    setTimeout(function(){ 
     gradient.push([0, 0.99]); 
    }, 3000); 

    setTimeout(function(){ 
     gradient.pop(); 
    }, 3000); 

    setTimeout(function(){ 
     gradient.shift(); 
    }, 3000); 

    setTimeout(function(){ 
     gradient.map(function(stop){ 
       return Math.min(1, stop + 0.392); 
      }); 
    }, 3000); 

    setTimeout(function(){ 
     gradient.unshift(0); 
     gradient.pop(); 
    }, 3000); 

    gradient.clear(); 

난 각 함수 호출 (구배의 다른 동작) 이후에 변경 방사형 그라데이션이있다. 각 함수 호출에 의한 변경을 최종적으로 보여주기 위해 일련의 setTimeout()을 설정하여 사용자가 변경 사항을 볼 수 있도록했습니다. 각 함수 호출 후에 수행 할 해당 작업을 예상했지만 브라우저에서 테스트 할 때 마지막 호출 ( gradient.clear()) 만 수행됩니다. 이전의 setTimeout 호출이 실행 중인지 확실하지 않거나 마지막 호출까지 건너 뛰었습니다. 어떤 생각?

Answer 1

setTimeout과 pause을 혼동해서는 안됩니다. MDN documentation은 setTimeout을 다음과 같이 정의합니다.

지정된 지연 후에 기능을 호출하거나 코드 조각을 실행합니다.

프로그램 실행을 일시 중지하는 것에 대한 언급이 없습니다.

setTimeout(f, 3000); 
setTimeout(g, 3000); 

h(); 

이 코드 처음 다음 기능 h을 실행 f 3 초 그 (안 동시에, 날씨 g 또는 f 먼저 구현에 따라서 다를 수 있습니다 제공됩니다.)

당신이 찾고있는 무엇 후 g 이벤트 묶음입니다 - setTimeout 함수 내부에서 setTimeout을 호출하십시오.

는

var q = [] 

function run() { 
    var item = q.shift(); 
    item.func(); 
    if (q.length > 0) { 
     setTimeout(run, item.pause); 
    } 
} 

q.push({ func: f1, pause: 1000 }); 
q.push({ func: f2, pause: 1000 }); 

run()​; 

여기 f1가 실행 기능 효과 큐으로 실현 될 수있다 당신이 원하는, f2은 그 후 두 번째를 실행합니다.