JavaScriptのif文をfor文に書き換えたい

Question

前提・実現したいこと

JavaScriptのif文のループ処理をfor文で書きたい。
JavaScriptでif文を利用した背景画像のスライドショーをfor文に書き換えたいです。。

JavaScriptでif文を使い、背景画像のスライドショーを作りました。
調べて出てきたものをほとんど使いまわしているだけなのでfor文を使ったものに書き換えてみたいと書き換えたのはいいのですが、うまく動いてくれません。

if文を使ったスライドショー（動く）

<img id="back" src="photo1.jpg">
      <script>
       var photo = new Array("photo1.jpg","photo2.jpg","photo3.jpg","photo4.jpg");
       var num = 1;

        slide();

        function slide(){
          if (num == 3){
            num = 0;
          }
          else {
            num ++;
          }
          document.getElementById("back").src=photo[num];
          setTimeout("slide()",2500);
        }
        </script>

調べたものの使いまわしなのでこれはうまく動いてくれました。html内に書いています。

for文に書き換えたコード（動かない）

htmlとjsファイルに分けました。

   <img id="back" src="photo1.jpg">
      <script type="text/javascript" src="slide.js"></script>

var photo = new Array("photo1.jpg","photo2.jpg","photo3.jpg","photo4.jpg");
var num = 0;

function slide(){
   for(var i = 0; i < 10; i++){
   num ++;
   document.getElementById("back").src=photo[num];
    var id = setTimeout(slide(),2500)
    };
   if(i > 15){
    clearTimeout(id);
   }
 }

slide();

上記のコードをはじめのhtml内に書いたものと同様に動くようにするにはどこを修正すればいいのでしょうか。

Comments

[退会済みユーザー]

質問者さんのやろうとしていることと、for文って相性悪いと思うんですけど、
for文じゃないとだめでしょうか？

[yys949]

for文である必要は全くないのですが、初めのif文を使ったものが調べたものをそのまま使ったものでしたのでできるのであれば書き換えてみたいと考えました。
初学者のためあまり相性など考えることができていませんでした。

[退会済みユーザー]

setTimeoutを使っているので、
for文で書くよりかは、最初のif文のソースのほうが
見てわかりやすいコードになると思います。

[yys949]

教えていただきありがとうございます。
ここはif文を使用してfor文はまた別のところで使用してみようと思います。

[退会済みユーザー]

slide関数が実行され、中のfor文が実行された際、for文は一瞬で1~9の値を返してしまうため、そもそもこのパターンの応用はできないと思います。ただ、応用しようとすることはとても良いことだと思います。

[yys949]

応用ができないとは知りませんでした。ありがとうございます。
勉強用で作っているためfor文はまた別のところで使用してみます。

Answer 1

setTimeoutがあるので、最初のif文のほうが読みやすく書きやすいコードになります。
が、じゃあそのままでいいかというと多少なりとも問題が見えるので、直してみました。

const photos = ['photo1.jpg', 'photo2.jpg', 'photo3.jpg', 'photo4.jpg'];
const timeout = 2500;
const backImage = document.getElementById('back');
let num = 0;

const slide = function () {
    if (num === photos.length - 1) {
        num = 0;
    } else {
        num++;
    }
    backImage.src = photos[num];
    setTimeout(slide, timeout);
}

slide();

• 途中で変わらない値はconstを使う
• 配列はnew Array()よりは[]の方がいい(可読性の問題と、[]の方がほんの僅かだけど早い)
• 変数にはletを使う(varは使わない)
• functionを変数に入れるか、function xxx と定義するかは好み(変数に入れると巻き上げが起きない、という違いくらい)
• 比較する時に == でなく === を使う
• numと比較する数字をマジックナンバーにしない
• setTimeoutの第1引数は、関数名の文字列じゃなくて関数にする

調べれば出ることと、よく本などで指摘されるようなことばかりなので、詳細は省略します。

Comments

[退会済みユーザー]

もちろんですが、この限りではないですし、
ここに書いたことも、人によっては違う意見があると思います。
あくまで一例と思ってください。

[yys949]

ありがとうございます。
constを使うべきところや[]を使ったほうがいいところなど一度見聞きしていたはずなのにできていないことも確認ができました。