$setInterval( listener, delay )$
setIntervalは、一定の遅延間隔ごとに指定された関数などを実行します。 setIntervalは、インターバルタイマーを一意に識別するインターバルIDを返します。 返されたインターバルIDを使うことで対象のインターバルタイマーを削除することができます。
$clearInterval( intervalID )$
clearIntervalは、指定されたインターバルIDに対応したインターバルタイマーを削除します。
clearInterval() - Web API | MDN
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Web演習２ - サンプル９</title>
</head>
<body>
<h1>タイマー関数の利用</h1>
<h2>一定時間間隔の繰り返し</h2>
<p id="txt_interval">color name list</p>
<button type="button" id="btn_interval_start">start</button>
<button type="button" id="btn_interval_stop">stop</button>
<script src="sample09_1.js"></script>
</body>
</html>
{
//element
const doc = document;
const intervalText = doc.querySelector('#txt_interval');
const intervalStartButton = doc.querySelector('#btn_interval_start');
const intervalStopButton = doc.querySelector('#btn_interval_stop');
// setting
const colors = [ 'red', 'green', 'blue', 'tomato', 'lightgreen', 'skyblue' ];
let intervalId = null;
let intervalCount = 0;
const deley = 1000;
// #btn_interval_start click event
intervalStartButton.addEventListener('click', ()=>{
if(!intervalId) {
intervalId = setInterval(()=>{
let index = intervalCount % colors.length;
intervalText.innerText = colors[index];
intervalText.style.color = colors[index];
intervalCount++;
}, deley);
}
});
// #btn_interval_stop click event
intervalStopButton.addEventListener('click', ()=>{
if(intervalId){
clearInterval(intervalId);
intervalId = null;
}
});
}