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