javascript - 设定间隔的计时情况

Question

我误解了 setInterval() ，并且我期望在它执行时出现的值并非如此，因此它失败了。

function setPairAnimations() {
    if (pairs.length > 0) {
        if (pairCount < pairs.length) {
                intervalNames.push(setInterval(function (pairCount) {
                    if (topMarker == true) {
                        pairs[pairCount].pMarker1.setZIndex(201);
                        pairs[pairCount].pMarker2.setZIndex(200);
                        topMarker = false;
                    }
                    else {
                        pairs[pairCount].pMarker1.setZIndex(200);
                        pairs[pairCount].pMarker2.setZIndex(201);
                        topMarker = true;
                    }
                }, 1000));
            ++pairCount;
            setPairAnimations();            
        }       
    }    
}
function swapMarkers() {
    //first, stop all existing running marker animations
    clearIntervals();

    if (pairs.length > 0) {
       setPairAnimations();
    }
    if (clusters.length > 0) {
        setClusterAnimations();
    }
}

第6行下炸弹:“pairs[pairCount].pMarker1.setZIndex(201);”因为pairs[pairCount]未定义。 pairs 是一个文字对象的全局数组，每个对象都包含两个属性或键。例子。

pairs.push({ pMarker1: markerToggles[0].tMarker1, pMarker2: markerToggles[0].tMarker2 });

pairCount是全局计数变量

按照调试器的预期，Pairs 已正确填充。在本例中，它的长度为 1，因此两个标记对象之间应该只启动一个动画(在某些情况下，可能会有更多标记集进行动画处理，具体取决于在pairs 数组中找到了多少个标记集)。

我“相信”问题是，当 setInterval 函数执行时，pairCount 值不再是我所期望的(我假设超出了pairs 数组的范围)。在这次通话中:

intervalNames.push(setInterval(function (pairCount) {

pairCount 未定义，这就是我上面提到的行失败的原因。但我不知道该怎么办。是不是我无法将全局变量传递到匿名函数调用中？我不是一个非常有经验的程序员，所以我希望我正确地解释了这一点，并且如果需要的话可以提供更多代码，但我真的认为这只是对 setInterval 如何在循环中工作的误解，我只是误用了它。谢谢。

Answer 1

正如您所注意到的，在间隔调用的函数中，pairCount 是未定义的。这是因为您正在创建一个参数，该参数从来没有按时间间隔传递给它的值，并且它正在隐藏全局 pairCount。解决这个问题的一种方法是自己调用该函数，使用全局 pairCount 变量作为参数。通过将变量作为参数传递，您可以确定调用 setPairAnimations() 函数时其值就是将要使用的值。如果该值永远不会改变，那么您根本不需要参数。

intervalNames.push(setInterval(function() {
    // call the function, here pairCount is the global variable
    intervalAnimation(pairCount);
} , 1000));

// extracted from the setInterval into its own function
function intervalAnimation(pairCount) {
    if (topMarker == true) {
        pairs[pairCount].pMarker1.setZIndex(201);
        pairs[pairCount].pMarker2.setZIndex(200);
        topMarker = false;
    }
    else {
        pairs[pairCount].pMarker1.setZIndex(200);
        pairs[pairCount].pMarker2.setZIndex(201);
        topMarker = true;
    }
}

要循环并确保列表中的每一对都获得动画，您不必递归地执行此操作；您可以使用循环，如下所示:

function setPairAnimations() {
    // don't need to check length, loop won't run if length is 0
    for (pairCount = 0; pairCount < pairs.length; pairCount++) {
        intervalNames.push(setInterval(function() {
            intervalAnimation(pairCount);
        }, 1000));
    }
}