Question

页面加载功能“简介”启动后。此功能显示两个按钮，点击其中一个按钮后，另一个功能“startGame”从点击按钮的参数“innerHTML”开始。然后出现右侧面板，“START”按钮从10开始计时。当用户点击地图或时间达到0时，倒计时停止。在“开始”之后，用户可以单击地图（仅添加标记），然后再次单击“开始”以添加另一个标记。

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

那就是问题出现的时候。当功能“startGame”再次启动并且用户点击“START”按钮时，倒计时加倍（您可以在控制台中看到它）。如果用户点击地图，则一个倒计时停止，但第二个仍然计为零。

谁能告诉我为什么时间加倍？链接到实时版本：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()方法

Answer 2

您需要确保包含此代码的calcTime函数：

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

在运行时无法调用，因为如果它已经运行，那么对calcTime的另一次调用将排队，导致时钟速度提高两倍。

倍增时间计算

2 个答案: