javascript - 双倍计时

Question

页面加载后，“介绍”功能启动。该函数显示两个按钮，单击其中一个按钮后，另一个函数“startGame”以单击按钮中的参数“innerHTML”启动。然后出现右侧面板，“开始”按钮从 10 开始计时。当用户点击 map 或时间达到 0 时，倒计时停止。“开始”后，用户只能单击 map (以添加标记)，然后再次单击“开始”以添加另一个标记。

当用户点击 map 4 次时，“游戏”结束，并再次出现两个按钮。

那就是问题开始出现的时候。当“startGame”函数再次启动并且用户单击“START”按钮时，倒计时加倍(您可以在控制台中看到它)。如果用户单击 map ，第一个倒计时会停止，但第二个倒计时仍计数为零。

谁能告诉我为什么时间加倍？直播版本链接:http://najlepszekomisy.co.pl/

谢谢。

var elem =
{
    map: document.getElementById("mapa"),
    panel: document.getElementById("right_panel"),
    games: document.getElementById("games"),
    draw: document.getElementById("draw"),
    points: document.getElementById("pointsGet"),
    timer: document.getElementById("timer")
};
(function intro()
{
    elem.games.addEventListener("click",function(e){
        if(e.target.tagName==="H4")
        {
            TweenMax.to(elem.games,1,{ease: Back.easeOut,top: -50,onComplete:function(){
            startGame(e.target.innerHTML);}})
        }
    },false)
})();

function startGame(hit)
{

  var gameElement =
    {
        mapa:0,
        clickListener:0,
        number:0,
        usingSet:4,
        timeNum:10
    };

    (function loadMap()
    {
        var mapOptions =
        {
            zoom: 7,
            disableDefaultUI: true,
            zoomControl: true,
            center: new google.maps.LatLng(51.95442214470796, 19.14093017578125)
        };
        gameElement.mapa = new google.maps.Map(elem.map, mapOptions);
        google.maps.event.addListener(gameElement.mapa,'idle',function()
        {
            TweenMax.to("#right_panel",2,{ease: Back.easeIn,right: 0,onComplete:function(){
                TweenMax.set(".anim_from_bottom", { display: 'block' });
                TweenMax.staggerFrom(".anim_from_bottom",0.5,{y:1600},0.2);
                google.maps.event.clearListeners(gameElement.mapa, 'idle');
                }});
        });
    })();
    elem.draw.addEventListener("click",function(){
        if(gameElement.number<gameElement.usingSet)
        {
        gameElement.number++;
        timer.time=gameElement.timeNum;
        timer.calcTime();
        gameElement.clickListener = google.maps.event.addListener(gameElement.mapa, "click", function (e) {
                addMarker(e.latLng.lng(), e.latLng.lat());

        });
        elem.draw.disabled=true;
    }else{result()}},false);

    function addMarker(lng,lat)
    {
        timer.stopTime();
        var opcjeMarkera =
        {
            position: new google.maps.LatLng(lat,lng),
            map: gameElement.mapa,
            title: hit

        };

        var marker = new google.maps.Marker(opcjeMarkera);
        google.maps.event.removeListener(gameElement.clickListener);
        elem.draw.disabled=false;

    }

    var timer =
    {
        time: 0,
        startTime:0,
        calcTime:function()
        {
            elem.timer.className = "elem";
            elem.timer.innerHTML = timer.time;
            console.log(timer.time);
            if(timer.time===0){elem.timer.className = " ";clearTimeout(timer.startTime);}
            else
            {
                --timer.time;
                timer.startTime = setTimeout(timer.calcTime, 1000);
            }

        },
        stopTime:function()
        {
            clearTimeout(timer.startTime);
            elem.timer.className = " ";
            this.time=gameElement.timeNum;
        }
    };
    function result ()
        {
            console.log("koniec");
            gameElement.number=0;
            TweenMax.to("#right_panel",2,{ease: Back.easeIn,right: -300});
            TweenMax.to(elem.games,1,{ease: Back.easeOut,top: 50})

        }

}

Answer 1

每次单击 H4 按钮时，它都会调用 startGame 函数。每次调用 startGame 函数时，它都会向 Start 按钮添加一个事件监听器，因此当您第一次玩时，启动处理程序会被调用一次，第二次会调用两次，下一次会调用三次时间等

要避免这种情况，您可以:

• 在init函数中添加事件监听器(调用一次)
• 在添加新事件监听器之前先删除事件监听器(请参阅 https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener)
• 如果此按钮只需要一个处理程序，请使用 onclick 属性而不是 .addEventListener() 方法