setInterval() 함수에서 정하는 시간에 관해서입니다.
안녕하세요.^^
오늘도 잘 지내시고 계시는지요?
오늘도 공부를 하다가 잠깐 궁금한 것이 있어서 이렇게 질문을 드려봅니다.
$(function(){
$clock = $('#clock');
nowTime();
});
function nowTime(){
setInterval(function(){
var objDate = new Date();
var hours = objDate.getHours();
var min = objDate.getMinutes();
var seconds = objDate.getSeconds();
$clock.html(hours + ' : '+min + ' : ' + seconds);
},10) // <<<== 이곳의 숫자를 이렇게 한번 10으로 해봅니다.
}
위 구문입니다.
만일 시간을 '10'정도로 아주 짧게 정해버리면,,
백분의 1초마다 setInterval()함수가 실행되기 때문에
컴퓨터나 웹브라우저에 무리를 줄까요..? -.=;;;
브라우저마다 약간씩의 차이는 있겠습니다만 setInterval() 함수 자체는 브라우저의 성능에 영향을 주지는 않는 것으로 보시면 됩니다.
함수 내부적으로 비동기와 큐를 사용하기 때문에 알아서 성능에 최소한의 영향을 주도록 만들어져있습니다.
만약 실행이 느려진다면 setInterval() 함수의 문제라기보다는 함수 내부에 구현한 코드 자체가 성능에 영향을 줄 수는 있을 것입니다.
그런데 올리신 예제를 실행해보시면 화면에 글자를 그리는(렌더링하는) 작업을 너무 짧은 간격으로 했기에 글자가 깜박거리는 현상이 눈에 보이게 됩니다.
성능에 영향을 주지는 않겠지만 보기에는 불편해 보이게 됩니다.
즉, 대부분의 경우 굳이 간격을 10ms 이내로 짧게 지정할 이유도 없고 지정할 필요도 없습니다.
그 때 그 때 상황에 가장 적절하다고 생각되는 값으로 딜레이 간격을 지정하시면 되겠습니다.