JavaScript while 循环错误：意外的令牌答案

【问题标题】：JavaScript while loop error: Unexpected tokenJavaScript while 循环错误：意外的令牌
【发布时间】：2017-07-12 22:33:33
【问题描述】：

所以我为一些课程编写了代码，该代码假设在页面加载时启动一个函数，然后运行更改屏幕上交通灯图像的函数。假设它会永远保持变化，但是当我尝试运行时程序崩溃或无法加载。在您提出问题是条件中使用的变量未更改之前，我已尝试在以下代码中更改它。当我在 chrome 调试器中运行它时，这就是出现的问题； 'Uncaught SyntaxError: Unexpected token

<DOCTYPE html>
<html>
    <body onload="infinity()">
        <p></p>
        <h1>Traffic Light Sequence</h1>
        <img id ="trafficlight" src="r.jpg">
        <script>
            var images  = [
                "r.jpg",
                "randy.jpg",
                "g.jpg",
                "y.jpg"
            ];
            var counter = 0;
            function start() {
                counter = counter + 1;
                if(counter == images.length) counter=0;
                var image = document.getElementById("trafficlight");
                image.src=images[counter];
            }
            var a = 100;
            function infinity() {
                while (200>a) {
                    setTimeout(start(), 3000);
                }
                a = a - 25;
            }
        </script>
    </body>
</html>

【问题讨论】：

a = a - 25; 应该在循环内。此外，删除 start() 上的括号以表示 setTimeout
你没有说错误是什么。这很重要。
打开您的控制台，使用调试器，并准确告诉我们哪里出了问题以及为什么它让您感到困惑。
我想我是在 google chrome 的调试器中运行它的，当我运行它时它说“Uncaught SyntaxError: Unexpected token
我现在该怎么办？ imgur.com/a/UkbKP

标签： javascript while-loop

【解决方案1】：

使用 setInterval 代替设置 while 循环和 setTimeout。我认为下面的代码会起作用。它会改变图像 100 次

var url="http://www.hdwallpapers.in/thumbs/2017/";
var a=0,Handler;
var images  = ["yosemite_national_park_winter_4k-t1.jpg","namib_coastal_desert_4k-t1.jpg","beach_dock-t1.jpg"];
var counter = 0;
function start() {
  counter = counter + 1;
  a++;
  if(a>=100 && Handler)
    clearInterval(Handler);
  if(counter == images.length) counter=0;
  var image = document.getElementById("trafficlight");
  image.src=url+images[counter];
  return;
}
function infinity() { 
    Handler=setInterval(start, 3000); 
}

<DOCTYPE html>
<html>
    <body onload="infinity()">
        <p></p>
        <h1>Traffic Light Sequence</h1>
        <img id ="trafficlight" src="http://www.hdwallpapers.in/thumbs/2017/yosemite_national_park_winter_4k-t1.jpg">
        <script>
            
        </script>
    </body>
</html>

【讨论】：

【解决方案2】：

我知道这个问题已经有了答案，但我只是想下面的代码可能是一种更好且相对简单的方法。

<DOCTYPE html>
<html>
    <body onload="infinity()">
        <p></p>
        <h1>Traffic Light Sequence</h1>
        <img id ="trafficlight" src="r.jpg">
        <script>
            var images  = [
                "red.JPG",
                "green.jpg",
                "randy.jpg",
                "yellow.JPG"
            ];
            function infinity() {
              var counter = 0,
                  image = document.getElementById("trafficlight"),
                  a = 5,
                  timeoutInterval = 3000;
              setInterval(function() {
                counter++;
                if(counter == images.length) counter=0;
                if (a>=0) {
                    image.src=images[counter];
                    a--;
                }else{
                    // this else case is in the event that the timeout
                    // variable is 1, which is essentially 1ms, which 
                    // is bad as it would make your cpu usage go to a
                    // 100%
                    if (timeoutInterval <= Number.MAX_SAFE_INTEGER - 2) {
                        // the above if condition is to stop timeoutInterval
                        // from ever reaching 2^53 which would cause an 
                        // overflow
                        timeoutInterval *= 2;
                        Math.pow(timeoutInterval, 20);
                    }
                }
              }, timeoutInterval);
            }
        </script>
    </body>
</html>

谢谢！

附：我的笔记本电脑仍然因为运行示例的无限循环代码而发热

【讨论】：