９：時間を操作する。setTimeoutをつかってあそぼ

一定の時間ごとに何かを実行できます。

codeとかいてあるところに函数をいれると動くようです。

var intervalID = scope.setInterval(code, delay);

setInterval() - Web API | MDN

setInterval() メソッドは Window および Worker メソッドで提供され、一定の遅延間隔を置いて関数やコードスニペットを繰り返し呼び出します。

こんなコードを書いてみました。

<!DOCTYPE html>
<html>
<title>時間を操るのだ１</title>
<body>

<script>
let count = 0;
let countUp = () =>{
document.write(count++,"秒経過。");
}

let intervalId = setInterval(() =>{
countUp();
if(count > 5){
clearInterval(intervalId);　//intervalIdをclearIntervalで指定している
}}, 1000);

</script>

</body>
</html>

できましたか？

では、改造して、ボタンを押すとカウントを開始するコードを書きます。

<!DOCTYPE html>
<html>
<title>時間を操るのだ２</title>
<body>
<p id="cntNumber">数えちゃうからね！</p>
<button id="startBtn">数えるよ</button>

<script>

let startBtn = document.getElementById("startBtn");
document.startBtn.addEventListener("click", countUp());

let count = 0;
let countUp = () =>{
//document.getElementById("cntNumber").innerHTML= "count++"+"秒経過。";
document.write(count++,"秒経過。");
}

let intervalId = setInterval(() =>{
countUp();
if(count > 5){
clearInterval(intervalId);　//intervalIdをclearIntervalで指定している
}}, 1000);

</script>

</body>
</html>

これで間違っているから動かないのですね。

なぜでしょうか？

言われたらなるほどとおもいます。

どこかの何かを、書く順番が違ったのです。

次のコードなら動きます。

<!DOCTYPE html>
<html>
<title>時間を操るのだ２</title>
<body>
<p id="cntNumber">数えちゃうからね！</p>
<button id="startBtn">数えるよ</button>

<script>

let count = 0;
let countUp = () =>{
//document.getElementById("cntNumber").innerHTML= "count++"+"秒経過。";
document.write(count++,"秒経過。");
}

let intervalId = setInterval(() =>{
countUp();
if(count > 5){
clearInterval(intervalId);　//intervalIdをclearIntervalで指定している
}}, 1000);

let startBtn = document.getElementById("startBtn");
document.startBtn.addEventListener("click", countUp());

</script>

</body>
</html>

コンピューターは、上から順番に文章を読みま

今回はcountUpという函数を定義する前にcountUpを使っていたために「なんやその函数、知りません」といわれてしまったようなものです。

setInterval は繰り返し函数を動かしますが、一度だけ関数を動かしたいときはsetTimeoutを使います。