<!DOCTYPE html> <html lang="ko"> <head> <meta name="viewport" content="width=device-width"> <meta charset="UTF-8"> <link rel="stylesheet" href="https://meyerweb.com/eric/tools/css/reset/reset.css"> <title>Timer</title> </head> <body> <script> // 2초마다 콘솔에 "red", "green", "blue", "red", "green", ... 와 같이 출력 // 출력할 원소의 인덱스를 나타내는 인덱스 변수 var i = 0; // 출력할 값들을 저장하는 배열 var colors = ['red', 'green', 'blue']; // window.setInterval 메서드로 타이머를 등록 window.setInterval(function () { // 이 함수는 setInterval 메서드로 등록한 타이머로 의해 2000ms마다 실행된다. // 콘솔에 배열 colors의 원소를 차례대로 출력 console.log('background-color: %s', colors[i]); // 2000ms가 지난 다음, 타이머에 의해 이 함수가 다시 실행될 때, 출력할 값의 인덱스를 설정 i++; // 배열 colors의 원소들을 반복적으로 출력하기 위해, 원소의 인덱스를 나타내는 // 인덱스 변수 i가 3이 되면, 배열 colors의 첫 번째 원소를 나타내도록 변수 i는 0이 되어야 한다. // if(i == 3) i = 0; // if(i === colors.length) i = 0; i %= colors.length; }, 2000); </script> <script> // 2초마다 메시지 다섯 개를 콘솔에 하나씩 차례대로 출력 /* * 프로그램의 서로 다른 기능에서 인덱스 변수를 사용해야 한다면, 그 인덱스 변수들은 * 반드시 다른 식별자를 이용해야 한다. */ var j = 0; // 타이머의 시간 간격을 나타내는 변수 var INTERVAL = 2000; // 출력할 메시지를 담고 있는 배열 var strings = [ 'Time is gold.', 'No sweat, no sweet.', 'Asking costs nothing.', 'Step by step goes a long way.', 'You will never know until you try.' ]; // 나중에 타이머를 해제하기 위해, 타이머를 등록한 다음 setInterval 메서드가 반환하는 // 타이머 ID를 변수에 대입해둔다. var print = window.setInterval(function () { // 이 함수는 setInterval 메서드로 등록한 타이머에 의해 2000ms마다 실행된다. console.log('%d. %s', (j + 1), strings[j]); // 2000ms가 지난 다음, 타이머에 의해 이 함수가 다시 실행될 때, 출력할 값의 인덱스를 설정 j++; // 메시지 다섯 개를 모두 출력하고 나서 타이머를 해제 // A. window.setTimeout 메서드로 타이머를 등록해서, 10초가 지난 다음에 // setInterval 메서드로 등록한 타이머를 해제 // B. 이 함수가 다섯 번 실행된 다음에, setInterval 메서드로 등록한 타이머를 해제 // → 인덱스 변수가 배열 strings의 크기와 같으면, 타이머를 해제 if (j === strings.length) { window.clearInterval(print); } }, INTERVAL); /* // A. window.setTimeout 메서드로 타이머를 등록해서, 10초가 지난 다음에 // setInterval 메서드로 등록한 타이머를 해제 window.setTimeout(function () { // 이 함수는 setTimeout 메서드로 등록한 타이머에 의해 10000ms가 지난 다음에 실행 // 위에서 등록한 window.setInterval 메서드로 등록한 타이머를 해제 window.clearInterval(print); }, INTERVAL * strings.length); */ </script> </body> </html>
