javascriptでのモグラたたきアプリ（setTimeoutで時間差で関数を実行）

■チェックする画像の設定２。
setInterval で定期的に関数を実行させることができたけど、少し画像を差し替えたいときには setTimeout が使えそう。下のjavascriptでサンプルを実行。

function click02() {
      let img = document.getElementById("a01");
      let vallist = [500, 1000, 3000];
      let imglist = ["./mogura_normal_pre.png","./mogura_normal.png","./mogura_sta.png"];

      let setImage = function(image){
         img.src = image;
      };
      for(let i=0; i < imglist.length; i++) {
            setTimeout(setImage, vallist[i], imglist[i]);
      }
}

下の、./mogura_normal_pre.png、./mogura_normal.png、./mogura_sta.pngの画像を0.5秒、1秒、3秒でそれぞれ差し替え。

./mogura_normal_pre.png

./mogura_normal.png

./mogura_sta.png

これとwhile文を使って永続的に画像の切替えができないかと思ったけど、差し替えの文を通ってもfunction文全体が終わらないとhtmlには反映されないよう。

でも、setIntervalとsetTimeoutを使えばイメージするようなモグラたたきのアプリは作れそう。