한 번에 하나씩 자바 스크립트 렌더링

Question

웹 페이지에 수백 줄의 자바 스크립트가 있습니다. 페이지가로드되면 모든 행이 동시에 렌더링됩니다.

질문을 간단하게하려면 3 가지 기능을 가진 js 파일이 있다고 가정 해 봅시다.

drawing_one 
drawing_two 
drawing_three 

현재 페이지가로드 될 때 하나, 둘, 셋이 동시에 페이지에 그려집니다. 로드 할 때 아무 것도 그려지지 않는 가장 좋은 방법은 무엇입니까? 어떤 간격 후에, 1 초라고 말하면, 한 번에 하나씩 모두 그릴 것입니다. 이 예제에서는 주어진 시간 간격 후에 1, 2, 3을 그립니다. 모든 것이 그려지면 모든 것을 지우고 다시 시작합니다.

게시물을 바탕으로

Answer 1

, 당신의 setTimeout 기능을 시도 할 수 있습니다 :

$(document).ready(function() { 

    setTimeout(function() { 
     drawing_one(); 
    }, 1000); 


}); 

그런 drawing_one()를 다음과 같이 수 : drawing_three에 대한 다음

function drawing_one() { 

    //do stuff, then 

    setTimeout(function() { 
     drawing_two(); 
    }, 1000); 

} 

반복 drawing_two이 패턴()와 ()

function drawing_three() { 

    //do stuff, then 

    clearDrawings(); // you define this 

    setTimeout(function() { 
     drawing_one(); // start over 
    }, 1000); 

}