javascript - Doubled time counting -
after page load function "intro" launch. function displays 2 buttons, after click on 1 of them function "startgame" starts parameter "innerhtml" click button. right panel appears , "start" button counts time 10. countdown stops when user click on map or time reaches 0. after "start" user can click on map (to add marker) ones, , click "start" again add marker.
when users click on map 4 times "game" finishes , 2 buttons appear again.
and when problem starts. when function "startgame" starts again , user clicks "start" button, countdown doubles (you can see in console). if user clicks on map 1 countdown stops second still counts zero.
can tell me why time doubled? link 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}) } }
every time h4
button clicked calls startgame
function. every time startgame
function called adds 1 more event listener start
button, start handler called once when play first time, twice second time, thrice next time etc.
to avoid can:
- add event listener in
init
function (which called once) - remove event listeners before adding new 1 (see https://developer.mozilla.org/en-us/docs/web/api/eventtarget/removeeventlistener)
- use
onclick
property instead of .addeventlistener()
method if there 1 handler needed button
Comments
Post a Comment