Javascript 函數比需要的時間長了一步

Question

我有一個功能比需要的時間長一步。 單擊圖像 (elefant.png) 時，圖像 (scale1.png) 會更改。 有5張圖片，效果很好。 問題是當顯示最后一張圖片時，我再次單擊（elefant.png）它會出現未定義的圖片？ 我不明白為什么它不只是停在最后一張圖片（scale5.png）上？

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <link rel="stylesheet" href="style.css">
  <body>

    <div class="wrapper1">

      <h2 id="title_text">Hey</h2>

        <img src="image/scale1.png" id="getImage">

        <img src="image/elefant.png" style="width:250px; height:auto;" onclick="imagefun()">



    </div>

    <script type="text/javascript">

        var counter = 0,
    gallery = ["image/scale2.png", "image/scale3.png", "image/scale4.png", "image/scale5.png"],
    imagefun = function () {
        document.getElementById("getImage").src = gallery[counter];
        counter++;
        if (counter >= 4) {
            document.getElementById("title_text").innerHTML = "New text!";
        }

    };

    </script>


  </body>
</html>

這可能是一個簡單的解決方法，但我不擅長 javascript。 我試圖尋找答案，但我不確定要尋找什么，因為我不知道是什么導致了問題？

Answer 1

我不確定一旦你到達畫廊數組的末尾，你的最終結果應該是什么，但就目前而言，它會將 title_text 更改為“新文本！”。

您的代碼的問題在於您總是增加計數器並根據該整數更改源 getImage 。 一旦您的計數器達到 4，這不會停止。

我將使用數組長度作為停止點，並且只增加計數器變量直到達到該限制。 我會寫這樣的東西：

 var counter = 0, gallery = ["image/scale2.png", "image/scale3.png", "image/scale4.png", "image/scale5.png"], imagefun = function () { if (counter >= gallery.length) { document.getElementById("title_text").innerHTML = "New text!"; } else{ document.getElementById("getImage").src = gallery[counter]; counter++; } };

 <div class="wrapper1"> <h2 id="title_text">Hey</h2> <img src="image/scale1.png" id="getImage"> <img src="image/elefant.png" style="width:250px; height:auto;" onclick="imagefun()"> </div>

Answer 2

您始終運行該函數並更改圖像源，然后才檢查counter的值。 這就是為什么即使計數器大於 3 它也會繼續前進並更改源的原因。

一個解決方案是有條件地改變counter的值：

if (counter < gallery.length - 1) {
  counter++;
}

Javascript 函數比需要的時間長了一步

問題描述

2 個解決方案

解決方案1
1 已采納 2021-10-18 09:11:31

解決方案2
0 2021-10-18 09:03:19

Javascript 函數比需要的時間長了一步

問題描述

2 個解決方案

解決方案1 1 已采納 2021-10-18 09:11:31

解決方案2 0 2021-10-18 09:03:19

解決方案1
1 已采納 2021-10-18 09:11:31

解決方案2
0 2021-10-18 09:03:19