본문 바로가기

PROGRAMMING/Javascript,PHP

[Javascript]for문 안에 setInterval(+clearInterval) 쓰기

  • 복수개 선택된 체크박스 데이터의 개수만큼 for문을 돌리려고함.
  • 그런데 한회 실행후 사용자 입력 시간(초)만큼 쉬었다가 다음 반복문 실행해야함.
  • python에서는 초간단하게 내부함수 sleep()을 사용하면 만사 평탄한것이었는디...

  sleep() 만들기-실패


  • javascript에서 작성하여 호출, 사용되는 함수와 웹 외부의 API를 참조해 실행하는 함수가 너무너무 서로 독립적이어서 
  • python에서의 sleep()을 흉내내 함수로 만들어 사용했다가 
1
2
3
4
5
6
7
8
9
10
11
12
13
v_time = 3;
 
for(var i=0;i<viewList.length;i++){
    var a = viewList[i];
    Module.run(a);
 
    sleep(v_time);
}
 
sleep:function(seconds){
    var waitUntil = new Date().getTime() + seconds*1000;
    while(new Date().getTime() < waitUntil) true;
}
cs


  • 대실패...
  • 어째선지 i값이 v_time만큼 쉬었다가 증가하고 맨 마지막에 Module.run이 실행됐다.
    (아직 javascript 초보라서 이유를 잘 모르겠다.)

  setTimeout() - 실패

  • setTimeout은 지정시간만큼 우선 쉬었다가 코드를 실행한다는 것을 이용
1
2
3
4
5
6
7
8
9
10
11
12
v_time = 3;
 
for(var i=0;i<viewList.length;i++){
    var a = viewList[i];
    Module.run(a);
 
    setTimeout(function(){
        console.log('test');
    },v_time*1000);
}
 
 
cs
  • 이런식으로 처리했는데 sleep()와 같은 결과를 볼 수 있었다.

  setInterval(),clearInterval() - 성공


  • setInterval()을 지정하는 위치와 clearInterval()을 지정하는 위치를 계속 고민하며 수차례 시도한 끝에 오류 없이 성공했다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var i =0;
 
run = setInterval(function(){
    if(i==viewList.length){
 
       clearInterval(run);
 
    }else{
       var a=viewList[i];
 
       Module.run(a)
       i++;
 
    }
    console.log(i);
 
},viewTime*1000);
 
cs
  • 과감하게 for문을 지워버렸다. setInterval()이 계속 반복 해줄테니까...
  • 배열의 length값과 i가 같아지면 setInterval()을 종료해버리는 조건을 둠(clearInterval())
  • clearInterval()을 setInterval() 함수 바깥에 설정을때는 i값은 length값에서 증가가 멈추는데 코드 자체는 끝없이 오류를 발생 시킴(scope 오류였음)