javascript - 如何重新排列此代码以便我的 setInterval 停止无限循环？

Question

我正在尝试用 HTML/Javascript 制作一个简单的翻牌/内存匹配游戏(例如《 super 马里奥兄弟 3》)游戏，但 setInterval 命令遇到了一些小问题。

这里是完整代码的链接:http://jsfiddle.net/msfZj/ 这是它的主要问题/主要逻辑:

if(click == 2)  //denotes two cards being clicked
{
    if(flippedArray[1].src === flippedArray[0].src)  // if click 1 == click 2 then refer to function 'delayMatch' which sets click 1 and 2 cards to not be displayed
    {
        window.setInterval(function() { delayMatch() }, 500);       
        console.log("EQUAL");

    }
    else
    {
        window.setInterval(function() { delayNoMatch() }, 500); // if click 1 != click 2 then display card.png 
        console.log("NOT EQUAL");

    }
        function delayMatch()  //function for matching pairs
    {
    flippedArray[0].style = "display:none;";
    flippedArray[1].style = "display:none;";

    }
        function delayNoMatch()  //function for non-matching pairs
    {
    flippedArray[0].src = "card.png";
    flippedArray[1].src = "card.png";   
    }


    click = 0;  // when clicked two cards set click back to zero    
}

我点击的前两张卡片始终有效:但从那时起，setInterval 会每 500 毫秒一次又一次地无限循环地运行该函数。

如果有人能为我指出正确的方向，告诉我如何正确地做到这一点，我将非常感激。

非常感谢您抽出时间。

Answer 1

看起来您需要 setTimeout，它只运行一次？

window.setTimeout(function() { delayMatch() }, 500);       

否则，您需要使用clearInterval(i)清除间隔，但首先使用setInterval的返回值设置“i”:

var i = window.setInterval(function() { delayMatch() }, 500);

Here's a demo (我为 JSFiddle JQuerified 了一下)。