js-★★일정한 시간 간격으로 코드실행하기

쁘띠경·2024년 7월 23일

js

목록 보기
18/41

일정한 시간 간격으로 코드실행하기

일정한 시간 간격으로 코드실행하는 함수로 setInterval()매서드와 setTimeout()
매서드가 있다. setInterval()은 일정한 시간 간격으로 코드를 반복 실행하고,
setTimeout()는 일정한 시간이 흐른 후에 코드를 한 번 실행하고 자동으로 종료.

    [기본형]
    1. var 참조 변수 = setInterval(function(){자바스크립트코드},시간간격(ms))
        -해석: setInterval은 ms만큼 반복하겠다.반복은 뭘 할것이냐?function(){자바스크립트코드}를 반복-
        -ms=1000분의 1초 ex)500은 0.5초-

    2. var 참조 변수 = setTimeout(function(){자바스크립트코드},시간간격(ms))
        -해석: 위와 비슷함. 하지만 얘는 한 번만 실행시킨다는 것. 
        
        
        
        
        

setInterval의 반복실행을 멈추고 싶을때(반복)

setInterval의 반복 실행을 멈추고 싶을때에는 setInterval() 매서드를 이용
setInterval()의 소괄호 안에 setInterval을 매서드를 참조하고 있는 변수의 이름을
넣으면 setInterval()을 종료할 수 있다.

    [기본형]
    setInterval(참조변수)
        
        
        
        

setTimeout()의 반복실행을 멈추고 싶을때(1번)

setTimeout()은 원래 정해진 시간 이후에 한 번 코드를 실행하고 자동종료하지만
조금만 응용하면 원하는 횟수만큼 재귀호출하여 반복실행하게끔 만들 수 있다.
이때 횟수를 충족했을경우 setTimeout을 멈추고 싶다면 clearTimeout()매서드를 이용한다.

    [기본형]
    clearTimeout(참조변수)
    

        
        
        
        
        
        
        

setInterval


창을 여는 순간부터 실행된다.


계속 증가함.
만약 중단 시켜주고 싶으면


를 추가하여 중단 시켜줄 수 있다.


증가가 중단되었다.
해당 버튼을 눌러 중단 시켜줄 수 있다.
현재는 html에 썼지맘ㄴ 나중에 자바스크립트 안에서 실행시키고 종료할 수 있는 방법도 있다 !
setInterval은 clearinterval로 멈춰야한다.


setTimeout


1번만 실행하고 그 뒤로 실행되지 않는다.
setTimeout은 clearTimeout으로 멈춘다.

profile
안녕하세요 ! 발전을 위해 매일 도전하는 퍼블리셔 류영경입니다.

0개의 댓글