Javascript 我不能让setInterval为我工作_Javascript

Javascript 我不能让setInterval为我工作

javascript

Javascript 我不能让setInterval为我工作,javascript,Javascript,我有一个叫做“开始”的功能，当你按下“开始”按钮时会被触发。start函数调用另一个名为getRandomImage的函数。我希望getRandomImage每5秒重复一次，但我就是无法让setInterval方法对我起作用。我试着在start函数上设置interval，但这只会导致它触发一次，并且不会重复。我已经尝试在getRandomImages函数中设置间隔，但是它没有任何作用。基本上，我正在尝试做一个色盲测试，每5秒闪烁一个随机图像，直到30个图像通过或者用户点击一个按钮。我已经为此绞尽

我有一个叫做“开始”的功能，当你按下“开始”按钮时会被触发。start函数调用另一个名为getRandomImage的函数。我希望getRandomImage每5秒重复一次，但我就是无法让setInterval方法对我起作用。我试着在start函数上设置interval，但这只会导致它触发一次，并且不会重复。我已经尝试在getRandomImages函数中设置间隔，但是它没有任何作用。基本上，我正在尝试做一个色盲测试，每5秒闪烁一个随机图像，直到30个图像通过或者用户点击一个按钮。我已经为此绞尽脑汁8个多小时了，现在我真的在质疑我对编程语言的选择，哈哈

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"
    <title></title>
    <link rel="stylesheet" href="ColorPerceptionTest.css">


</head>

<body>
    <section>
        <img src="Default.png" id="defaultimage">

        <form>
            <input type="button" id="Button1" value="" onClick="">
            <input type="button" id="Button2" value="" onClick="">
            <input type="button" id="Button3" value="" onClick="">
            <br>
            <input type="button" id="Start" value="Start" onClick="start()">
            <input type="button" id="Help" value="Help" onClick="help()">
            <br>
            <p id="help"> </p>

        </form>

    </section>


    <script>
        var $ = function(id) {
            return document.getElementById(id);
        }

        $("Button1").style.display = "none";
        $("Button2").style.display = "none";
        $("Button3").style.display = "none";


        var imagesArray = ["3.gif", "05.gif", "5.gif", "6.gif", "7.gif",
                           "8.gif", "12.gif", "15.gif", "16.gif", "26.gif",
                           "29.gif", "42.gif", "45.gif", "73.gif",
                           "74.gif"];

        var runTimer = setInterval(start, 5000);

        function getRandomImage(imgAr, path) {
            path = path || 'images/';  
            var num = Math.floor( Math.random() * imgAr.length );
            var img = imgAr[ num ];
            var imgStr = '<img src="' + path + img + '" alt = "">';
            $("defaultimage").src = path + img;

            $("Button1").style.display = "initial";
            $("Button2").style.display = "initial";
            $("Button3").style.display = "initial";

            if(parseInt(img) < 8){
                $("Button1").value = parseInt(img);
                $("Button2").value = parseInt(img) - 2;
                $("Button3").value = parseInt(img) + 1;
            }else if(parseInt(img) > 7 && parseInt(img) < 29){
                $("Button1").value = parseInt(img) - 2;
                $("Button2").value = parseInt(img);
                $("Button3").value = parseInt(img) + 1;
            }else{
                $("Button1").value = parseInt(img) - 5;
                $("Button2").value = parseInt(img) - 9;
                $("Button3").value = parseInt(img);
            }
        }


        var start = function(){
            $("help").innerHTML = "";
            getRandomImage(imagesArray);
            $("Start").style.display = "none";
            $("Help").style.display = "none";


        }

        var help = function (){
            $("help").innerHTML = "This is a test designed to help you determine" +
                    " if you have a problem with seeing colors. When you press start, a series of " +
                    "random images will be displayed. You have 5 seconds to read the number and " + 
                    "select the correct button.";
        }

    </script>

</body>

尝试将setInterval调用移动到定义了start的位置

您的代码在中运行良好

更新：更清楚地说，如果OP编写的函数启动，发布的代码将被正确地提升。但是，由于他使用函数表达式，当调用setInterval时，start是未定义的

另一个更新：根据按钮和下面的注释更正计时器。

$Button1正在查找名为Button1的标记，这不太可能是您想要的。您是否已在开始时添加日志记录？我很确定它比以前更容易结块，因为EA函数定义总是被提升到其容器函数的顶部。你的建议不可能改变任何事情，但我的小提琴行得通，他的不行？来自jsfiddle的其他相关控制台输出：ReferenceError:start未定义操作，糟糕，我没有意识到函数被分配给了一个变量。没错，当调用setInterval时，start将是未定义的。。另一个可行的方法是将函数更改为函数start{…}谢谢。这几乎是完美的，但它是在单击开始按钮之前开始图像旋转，我希望避免这种情况。我尝试将其更改为var runTimer=setIntervalgetRandomImage，5000；但随后它抛出了无法读取未定义的属性'length'，所以我尝试了var runTimer=setIntervalGetRandomImageSarray，5000；但是它什么也不做。是的，只要你设定时间间隔，时钟就开始了。因此，在按下按钮之前不要设置间隔。

var start = function(){
    $("help").innerHTML = "";
    getRandomImage(imagesArray);
    $("Start").style.display = "none";
    $("Help").style.display = "none";
}
var runTimer = setInterval(start, 5000);