Question

这可能是一个漫长或凌乱的问题。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<div id="plus"><img rc="/1.jpg""></div>
<div id="Welcome_button"><button type="button" class="centre" onclick="welcomeOnClicked()">Welcome</button></div>

<div id="question_set"></div>

<div id="answer_set">
<div id="answer1"><img src="/a1.jpg" onclick="answerSelected(1)"></div>
<div id="answer2"><img src="/a2.jpg" onclick="answerSelected(2)"></div>
<div id="answer3"><img src="/a3.jpg" onclick="answerSelected(3)"></div>
<div id="answer4"><img src="/a4.jpg" onclick="answerSelected(4)"></div>
<div id="answer5"><img src="/a5.jpg" onclick="answerSelected(5)"></div>
</div>
<iframe src="" id="hiddenIFrame"></iframe>

<script>
var random, block = 0;
var TimeToLive;
var questionImages;
var resoursePrefix = "some google drive link";`

document.addEventListener('DOMContentLoaded', function() {
document.getElementById("question_set").style.display = "none";
document.getElementById("answer_set").style.display = "none";
document.getElementById("hiddenIFrame").style.display = "none";

//preload images
questionImages = new Array();
    function preload() {
        for (i = 0; i < 16; i++) {
            questionImages[i] = new Image();
            questionImages[i].src = preload.arguments[i+1];
        }
    }
    preload(
        resoursePrefix + "1.jpg",
        resoursePrefix + "2.jpg",
        resoursePrefix + "3.jpg",
        resoursePrefix + "4.jpg",
        resoursePrefix + "5.jpg",
        resoursePrefix + "6.jpg",
        resoursePrefix + "7.jpg",
        resoursePrefix + "8.jpg",
        resoursePrefix + "9.jpg",
        resoursePrefix + "10.jpg",
        resoursePrefix + "11.jpg",
        resoursePrefix + "12.jpg",
        resoursePrefix + "13.jpg",
        resoursePrefix + "14.jpg",
        resoursePrefix + "15.jpg",
        resoursePrefix + "16.jpg",
        resoursePrefix + "17.jpg",
        resoursePrefix + "a1.jpg",
        resoursePrefix + "a2.jpg",
        resoursePrefix + "a3.jpg",
        resoursePrefix + "a4.jpg",
        resoursePrefix + "a5.jpg"
    )
}, false);


function welcomeOnClicked() {
    document.getElementById("plus").style.display = "none";
    document.getElementById("Welcome_button").style.display = "none";
    document.getElementById("answer_set").style.display = "block";
    manageTest();
}

function manageTest() {
    block++;
    TimeToLive = [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4];
    switchPic();
}

function switchPic() {
    for (var i = 0, endRound = true; i < TimeToLive.length; i++) {
        if (TimeToLive[i] >= 1) {
            endRound = false;
        }
    }
    if (endRound == true) {
        manageTest();
    }
    if (block > 4) {
        alert("finish");
    }
    random = Math.floor((Math.random() * 17) + 2);
    console.log("switch " + random);
    if (TimeToLive[random-2] < 1) {
        return;
    }
    TimeToLive[random-2]--;
    $("#question_set").append(questionImages[random-2]);
    document.getElementById("question_set").style.display = "block";
    setTimeout(function(){
        $("#question_set").children("img").remove();
        document.getElementById("question_set").style.display = "none";
        document.getElementById("plus").style.display = "block";
    }, 200);
}

function answerSelected(answer) {
    console.log("submit block: " + block + " Q: " + random + " ans " + answer);
    Url = "some google form"
        + "&entry.1685446105=" + block
        + "&entry.995279407=" + random
        + "&entry.1271192673=" + answer
        + "&submit=Submit";
    document.getElementById("hiddenIFrame").src = Url;
    document.getElementById("hiddenIFrame").style.display = "block";
    document.getElementById("hiddenIFrame").style.display = "none";
    document.getElementById("plus").style.display = "none";
    switchPic();
}
</script>  
</body>
</html>

首先，抱歉长代码它基本上首先显示一个欢迎页面，包括一个加号和一个欢迎按钮如下
然后，开始进行照片测试测试首先显示仅200ms的图片然后切换回加号用户可以在下面的5张图片中选择最相似的图片。
在200ms左右

真正困扰我的是测试循环要求是有4轮在每一轮中，每张图片（总数= 16）将以随机顺序显示4次这使得每轮显示64张随机图片每张照片显示4次后，另一轮开始。

我的第一个想法是循环使用switchPic（）来做到这一点但我发现功能没有阻塞，所以测试就马上就结束了我的第二个想法是上面的代码问题是manageTest（）中的函数调用它使结果/循环不正确。

额外信息：
变量：随机存储生成的随机数并调用要显示的图片。然后它被发送到谷歌表格。 block = round，4轮测试中 TimeToLive是一个存储时间以显示每张图片的数组在answerSelected（int）中，它使用隐藏的iframe发送结果，包括圆形，图片绘制和对谷歌表单的响应。

再次，非常感谢任何输入并欢迎指出行中的任何不良做法

Answer 1

为了让事情在一段时间后发生，你可以使用setTimeout和setInterval函数，这些函数会在你给出它们之后调用你给它们的函数。

要跟踪回调函数时应该发生的事情，请使用变量。

这是一个例子，它以半秒的间隔从1到10进行计数：

var counter = 0;
tick();
function tick() {
  ++counter;
  snippet.log(counter);
  if (counter < 10) {
    setTimeout(tick, 500);
  }
}

<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

这一行：

setTimeout(tick, 500);

要求浏览器在500ms（半秒）后调用tick函数。时间不准确，但如果用户没有切换到不同的标签，通常就足够了。

然后我只是使用counter来跟踪我的位置。

如何在javascript中

1 个答案: