setInterval在第二次呼叫后不会停止

Question

我目前正在研究一种战斗系统。健康状况每200毫秒计算一次，我使用的是间隔。它的工作非常好，直到我开始比赛它不再停止了。

这是很多代码-我在这里也有一个在线现场演示http://wernersbacher.de/pro/coinerdev/。

就像我说的-第一种有效，但第二种不起作用。

所以，主要代码是：

var frameStop;
 // Draws Startscreen
    function showStartRaid(name) {               
            playerBTC = btc;
            playerBTCs = btcs;
            playerName = nick;

            // Sets stats for called level
            enemyBTC = dun[name]["buyer"]["btc"];
            enemyBTCs = dun[name]["buyer"]["btcs"];
            enemyName = dun[name]["buyer"]["label"];   
            enemyNum = dun[name]["meta"]["base"];         

            /* Reset everything in html */
    }

    var battle = false;

    $(".raid_building").click(function() {           
        //Draws level
        showStartRaid(name);

        //Sets start BTC as fighting stats (they will decrease during battle)
        fplayerBTC = playerBTC;
        fenemyBTC = enemyBTC;
        //Click on "Start"
        $("#startRaid").click(function() {
            function raiden() {
                //Calculates fighting
                fenemyBTC -= playerBTCs/frameMinus;
                fplayerBTC -= enemyBTCs/frameMinus;

                /*Draws stats and health here in html */

                if(fplayerBTC >= 0 && fenemyBTC >= 0)
                    console.log("battle goes on")
                else {
                    //If battle is over, stop it
                    clearInterval(frameStop);
                }
            }
            //Start battle
            frameStop = setInterval(raiden, frameRaid);
        });
    });

谢谢你的帮助，我很无助。

Answer 1

使用您的代码，每次单击.raid_building时，都会为单击#startRaid建立一个新的处理程序。这意味着，如果.raid_building被点击两次，您将有两个处理程序来单击#startRaid，这两个处理程序都会启动一个新的间隔定时器。您的frameStop变量将只包含其中一个的句柄；另一个将继续。当然，第三次单击会使问题更加复杂(您将有三个click处理程序，每个处理程序都会触发一个新的间隔定时器)。等等..。

将与click上的#startRaid 挂钩的代码移到之外，单击处理程序在.raid_building上移动。