Doubled time counting

Question

After page load function "intro" is launch. This function displays two buttons, after click on one of them another function "startGame" starts with parameter "innerHTML" from click button. Then the right panel appears and "START" button counts time from 10. Countdown stops when user click on map or time reaches 0. After "START" user can click on map (to add a marker) only ones, and click "START" again to add another marker.

When users click on map 4 times "game" finishes and two buttons appear again.

And that is when a problem starts. When function "startGame" starts again and user clicks "START" button, countdown doubles (you can see it in console). If user clicks on map one countdown stops but second still counts to zero.

Can anyone tell me why time is doubled? Link to live version: http://najlepszekomisy.co.pl/

Thank you.

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

Every time your H4 button is clicked it calls startGame function. Every time startGame function is called it adds one more event listener to the Start button, so start handler is called once when you play first time, twice the second time, thrice next time etc.

To avoid this you can:

• add event listener in init function (which is called once)
• remove event listeners before adding new one (see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener)
• use onclick property instead of .addEventListener() method if there is only one handler needed for this button

Answer 2

You need to make sure that the calcTime function which includes this code:

 timer.startTime = setTimeout(timer.calcTime, 1000);

cannot be invoked while it is already running, because if it does, then another call to calcTime will be queued up causing the clock to tick twice as fast.