Javascript 根据 if 语句更改 array[i]，然后在每次运行函数时将其连接起来

Question

我试图在 if 语句中附加一个数组，以便下次运行该函数时 array.length 增加，给出不同的结果。我的问题是 for 循环依赖于 if 语句的结果。即如果满足要求，则 array.length 将增加 1。然而，我知道如何做到这一点的唯一方法是将 for 循环放在 if 语句中，这基本上会在每次函数启动时生成 var i = 0 。我想我需要在 if 语句之外对 i 做一些事情。

    //setting a loop or rather interval
function hRandom() {
        var intervalID = setInterval(function() {
        document.getElementById("head").style.color=getRandomColor();
        }, 1000);
        setTimeout(function() {
            clearInterval(intervalID);
            }, 180000);
        }


var clickedTime; var createdTime;

Date.now();

function makebox() {

    var time=Math.random();

    time=time*5000;

    setTimeout(function() {

    if (Math.random()>0.5) {
    document.getElementById("redBox").style.borderRadius = "50%";
    } else {
    document.getElementById("redBox").style.borderRadius ="0";
    }

    var top=Math.random();

    top=top*300;

    var left=Math.random();

    left=left*600;

    document.getElementById("redBox").style.top=top+"px";
    document.getElementById("redBox").style.left=left+"px";

    document.getElementById("redBox").style.backgroundColor = getRandomColor();
    document.getElementById("redBox").style.display = "block";
    createdTime=Date.now();
    }, time);
}

document.getElementById("redBox").onclick = function() {

    clickedTime=Date.now();

    reactionTime=(clickedTime-createdTime)/1000;

    var rt = parseFloat(reactionTime);

    var about = new Array();

    about[0]="Statement one"
    about[1]="Statement two";
    about[2]="Statement three";

    if (rt < 0.5) 
    for (var i =0; i < about.length; i++) {document.getElementById("para").innerHTML = about[i];} 
    else {document.getElementById("para").innerHTML = "TOO SLOW!";}

    document.getElementById("yourTime").innerHTML=reactionTime+"s";


    this.style.display = "none";
    makebox();

}

makebox();
hRandom();

Answer 1

您需要将需要跟踪点击处理程序调用状态的任何内容移到该函数之外。

例如(更改值以使其更容易触发逻辑):

var createdTime = Date.now();
var about = ["Statement one", "Statement two", "Statement three"];
var aboutIdx = 0;

document.getElementById("redBox").onclick = function () {

    clickedTime = Date.now();

    reactionTime = (clickedTime - createdTime) / 1000;

    var rt = parseFloat(reactionTime);


    if (rt < 10.5) {
        document.getElementById("para").innerHTML = about[aboutIdx++ % about.length];
    } else {
        document.getElementById("para").innerHTML = "TOO SLOW!";
    }

    document.getElementById("yourTime").innerHTML = reactionTime + "s";
};

在这里，我不是循环遍历 about，而是引用一个外部作用域的 aboutIdx 变量，该变量跟踪调用点击处理程序的次数。 Modulo (%)根据 about 数组的长度，您将获得索引 0、1 或 2，具体取决于 aboutIdx 的值。

jsFiddle demo