[TypeScript] setInterval() 사용하기

Syntax

setInterval(function, milliseconds, param1, param2, ...)

 

파라미터	설명
function	필수. 실행할 함수
milliseconds	필수. 함수 실행주기 (단위: milliseconds)
param1,param2, ...	선택. 추가적으로 넘길 함수 (지원: IE9<)

 

참고 사이트: https://www.w3schools.com/jsref/met_win_setinterval.asp

 

 

typescript setInterval() not working 으로 꽤 삽질했던 내용이다.

 

현상

 

Pure Javascript로 사용한 Timer 방식은 아래와 같다.

var counter = 300;

var tick;

function preProcess() {

/**

* excute code...

*/

timerStart();

}

function timerStart() {

tick = setInterval(Timer, 1000);

}

function Timer() {

var temp;

var ramain_time = document.getElementById('counting');

counter = counter - 1;

/**

* excute code...

*/

}

 

이 방식을 그대로 TypeScript에 옮기려 했으나 에러가 발생했다.

export class TimerPage {

counter:number = 300;

tick: any;

/**

* excute code...

*/

preProcess() {

/**

* excute code...

*/

this.timerStart();

}

timerStart() {

this.tick = setInterval(this.Timer, 1000); //////★★★★★★★★

/* this.thick = setInterval(this.Timer(), 1000); //////★★★★★★★★ */ 

}

Timer() {

let temp;

let ramain_time = document.getElementById('counting');

this.counter =this.counter - 1; //////★★★★★★★★

/**

* excute code...

*/

}

}

 

문제가 발생한 부분은 ★로 표시한 부분들이다.

생각대로라면 this.counter 값인 300을 불러오고 이를 하나씩 차감해 나가는 것인데, 1000 milliseconds 주기에 맞춰 NaN만 찍혔다.

 

this.counter 변수를 제대로 찾기 못해서 발생한 문제였다. (*this 바인딩에 대해 찾아보기)

 

 

 

 

 

해결

 

timerStart() {

this.tick = setInterval(()=>this.Timer(), 1000);

}

Timer() {

let temp;

let ramain_time = document.getElementById('counting');

this.counter =this.counter - 1;

/**

* excute code...

*/

}

 

()=> 로 표현하는 것을 화살표 함수라고 하며, 이를 이용하여 해결할 수 있었다.

화살표함수는 ES6에서 새롭게 나온 개념이다.

 

화살표함수를 이용하여 Timer 함수 내부에서 사용하는 this가 가르키는 값은 바로 바깥의 함수(혹은 클래스)의 this값을 사용할 수 있다.

화살표함수를 이용하지 않았을 때에 this는 바인딩되지 않은 this로, 바깥의 함수(혹은 클래스)에서 정의하는 값과 다르다.

 

참고사이트: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98

 

바인딩 알아보기: http://blog.jeonghwan.net/2017/10/22/js-context-binding.html