Question

我有一个名为start的函数，当你按下开始按钮时会触发该函数。 start函数调用另一个名为getRandomImage的函数。我希望getRandomImage每5秒重复一次，但我无法让setInterval方法为我工作。我已经尝试将间隔放在启动函数上，但这只会导致它触发一次，并且不会重复。我已经尝试将间隔放在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>

Answer 1

尝试将setInterval调用移至定义start的位置

您的代码在this fiddle中运行良好。

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

更新：为了更清楚，如果OP写了function start()，则已发布的代码将被正确提升。但是，当他使用函数表达式时，start在调用setInterval时未定义。

另一个更新：这里是a forked fiddle根据按钮和下面的评论更正计时器。

我不能让setInterval为我工作

1 个答案: