javascript - Multiple PHP Requests Crashing Page -
i'm using jquery/php script displays 12 clocks on page. javascript file calls php file determine timezone offset, 12 clocks display, 12 php requests crashing page.
js file
/*these div id names added html*/ var clockalldivs = [ "clock0", "clocknyc", "clocktor", "clockvan", "clocklax", "clockfrnk", "clocksao", "clocktok", "clockbei", "clockhon", "clocklondon", "clockparis", "clocksydney" ]; var tz = jstz.determine(); // determines time zone of browser client tz.name(); /*get timezone list: http://php.net/manual/en/timezones.php*/ var timezones = [ tz.name(), "america/new_york", "america/toronto", "america/vancouver", "america/vancouver", "europe/zurich", "america/sao_paulo", "asia/tokyo", "asia/hong_kong", "asia/hong_kong", "europe/london", "europe/paris", "australia/sydney" ]; /*titles want show each clock*/ var clocktitles = [ tz.name(), "los angeles", "melbourne", "kathmandu", "tokyo", "johannesburg" ]; var usetitle1 = false; var usetitle2 = false; var clockwidthheight = 118;//width , height of clock var distancebetweenclocktitle = 5; var secondhandspeed = 100;//in ms, lower number, faster var smoothrotation = false;//true or false var usesecondhand = false;//set false if don't want see 2nd hand /*location of images*/ var clockfaceimg = "img/clockbg.png"; var hourhandimg = "images/hourhand.png"; var minutehandimg = "images/minutehand.png"; var secondhandimg = "images/secondhand.png"; var amimg = "images/am.png"; var pmimg = "images/pm.png"; /*location of high res images retina display*/ var clockfacehighresimg = "img/clockbghighres.png"; var hourhandhighresimg = "images/hourhandhighres.png"; var minutehandhighresimg = "images/minutehandhighres.png"; var secondhandhighresimg = "images/secondhandhighres.png"; var amhighresimg = "images/amhighres.png"; var pmhighresimg = "images/pmhighres.png"; /*text days , months*/ var daytext = [ "sun", "mon", "tue", "wed", "thu", "fri", "sat" ]; var monthtext = [ "jan", "feb", "mar", "apr", "may", "jun", "jul", "aug", "sep", "oct", "nov", "dec" ]; /////////////////////////////// //do not edit below line// /////////////////////////////// var clockdivs = []; var offsets = []; var minutehand; var hourhand; var secondhands = []; var minutehands = []; var hourhands = []; var ams = []; var pms = []; var retina = false; var imgsloaded = 0; var imagestoload = 6; var callinterval = 1000; var thisoffset; var formerhr = []; var isstart = true; var tzchecked = 0; //once page ready . . . $( document ).ready(function() { var dnow = new date(); thisoffset = dnow.gettimezoneoffset();//figure out user's timezone //get timezone info each of clocks for(var = 0;i<clockalldivs.length;i++){ gettzoutput(i); } }); //build each clock function analogclock(){ retina = window.devicepixelratio > 1;//check if retina //if it's high res, use high res images if(retina){ clockfaceimg = clockfacehighresimg; hourhandimg = hourhandhighresimg; minutehandimg = minutehandhighresimg; secondhandimg = secondhandhighresimg; amimg = amhighresimg; pmimg = pmhighresimg; } //determine if want use second hand if(usesecondhand == false){ imagestoload = imagestoload - 1; } //change call interval smooth rotation if(smoothrotation == true && usesecondhand){ callinterval = 50; } //create each clock visually for(var = 0;i<clockalldivs.length;i++){ var clockalldiv = $("#" + clockalldivs[i]); //add bg clockalldiv.append("<div id='analog-clock" + + "' class='myclock'></div>") //add title if(usetitle1 || usetitle2){ var clocktitlepos = distancebetweenclocktitle + clockwidthheight; if(usetitle1)clockalldiv.append("<div><p class='clocktitle'>" + clocktitles[i] + "</p></div>"); if(usetitle2){ clockalldiv.append("<div><p id='title2_" + + "' class='clocktitle2'></p></div>"); } $('.clocktitle').css({"margin-top":clocktitlepos + 'px'}); if(usetitle2 && !usetitle1)$('.clocktitle2').css({"margin-top":clocktitlepos + 'px'}); } clockdivs[i] = "analog-clock" + i; var clockdiv = $("#" + clockdivs[i]); //set clock holder css clockdiv.css({"height":clockwidthheight + "px", "width":clockwidthheight + "px", "position":"relative"}); //add more graphical elements clockdiv.append("<img id='bg' src=" + clockfaceimg + " height="+clockwidthheight+" width="+clockwidthheight+" />"); //add div am/pm clockdiv.append("<img id='am' class='ampm' src='" + amimg + "' width='28' height='18' />"); clockdiv.append("<img id='pm' class='ampm' src='" + pmimg + "' width='28' height='18' />"); //add hands $("<img id='hourhand' src=" + hourhandimg + " />").appendto("#" + clockdivs[i]); clockdiv.append("<img id='minutehand' src=" + minutehandimg + " />"); if(usesecondhand)clockdiv.append("<img id='secondhand' src=" + secondhandimg + " />"); //define elements if(usesecondhand)secondhands[i] = $("#" + clockdivs[i] + " #secondhand"); minutehands[i] = $("#" + clockdivs[i] + " #minutehand"); hourhands[i] = $("#" + clockdivs[i] + " #hourhand"); ams[i] = $("#" + clockdivs[i] + " #am"); pms[i] = $("#" + clockdivs[i] + " #pm"); if(i == 0){ //check see if images loaded $('#bg').load(function() { checkifimagesloaded(); }); if(usesecondhand)secondhands[i].load(function() { checkifimagesloaded(); }); minutehands[i].load(function() { checkifimagesloaded(); }); hourhands[i].load(function() { checkifimagesloaded(); }); ams[i].load(function() { checkifimagesloaded(); }); pms[i].load(function() { checkifimagesloaded(); }); } //set clock css var handids = $("#" + clockdivs[i] + " #bg, #hourhand, #minutehand, #secondhand"); handids.css({"position":"absolute"}); } }; function checkifimagesloaded(){ //this gets called each time image loaded imgsloaded++; if(imgsloaded == imagestoload){//once images loaded for(var = 0;i<clockalldivs.length;i++){ //adjust widths , heights if 2x resolution if(retina){ if(usesecondhand)secondhands[i].css( { "height":secondhands[i].height()/2, "width":secondhands[i].width()/2 } ); minutehands[i].css( { "height":minutehands[i].height()/2, "width":minutehands[i].width()/2 } ); hourhands[i].css( { "height":hourhands[i].height()/2, "width":hourhands[i].width()/2 } ); } //set position of hands if(usesecondhand)secondhands[i].css( { "left": (clockwidthheight - secondhands[i].width())/2 + "px", "top": (clockwidthheight - secondhands[i].height())/2 + "px" });//set x , y pos minutehands[i].css( { "left": (clockwidthheight - minutehands[i].width())/2 + "px", "top": (clockwidthheight - minutehands[i].height())/2 + "px" });//set x , y pos hourhands[i].css( { "left": (clockwidthheight - hourhands[i].width())/2 + "px", "top": (clockwidthheight - hourhands[i].height())/2 + "px" });//set x , y pos //if(usesecondhand)setsecondstart(); //fade clocks in $("#" + clockalldivs[i]).animate({ opacity:1 }, "slow"); } //call rotatehands function setinterval(function(){ rotatehands(); }, callinterval);//1000 = 1 second if(!smoothrotation)rotatehands();//make sure start in right position } } function rotatehands(){ for(var = 0;i<clockalldivs.length;i++){ //get current time/date local computer var = new date(); now.setminutes(now.getminutes() + offsets[i] + thisoffset); //set second hand var secondangle = 6 * now.getseconds();//turn time angle if(smoothrotation)var smoothsecondangle = now.getmilliseconds()/1000 * 6 + secondangle; var currenthr = now.gethours(); if(formerhr[i] && currenthr != formerhr[i]){ gettzoutput(i); setdaymonthtxt(now, i); } formerhr[i] = currenthr; if(usesecondhand){ if(smoothrotation){ secondhands[i].rotate(smoothsecondangle, 'abs');//set hand angle }else{ if(secondangle == 0){ secondhands[i].rotate(-6, 'abs');//set hand angle } secondhands[i].rotate({ animateto:secondangle, duration:secondhandspeed}, 'abs'); } } //set minute hand var minuteangle = 6 * now.getminutes() + secondangle/60;//turn time angle minutehands[i].rotate(minuteangle, 'abs');//set hand angle //set hour hand var hourangle = 360/12 * currenthr;//turn time angle var houranglewoffset = hourangle + minuteangle/12; hourhands[i].rotate(houranglewoffset%360, 'abs');//set hand angle } isstart = false; } //get timezone info function gettzoutput(thisnum) { $.ajax({ type: "post", url:'timezone-clock-scripts/gettimezonetime.php', data: {thistz:timezones[thisnum]}, datatype: "json", success: function (response) { offsets[thisnum] = response/60; alltzchecked(); }, error: function (){ console.log("error"); } }); } //make sure php script has called first function alltzchecked(){ tzchecked++; if(tzchecked == clockalldivs.length){ analogclock(); for(var = 0;i<clockalldivs.length;i++){ var = new date(); now.setminutes(now.getminutes() + offsets[i] + thisoffset); setdaymonthtxt(now, i); } } } function setdaymonthtxt(now, thisnum){ var thisday = daytext[now.getday()]; var thismonth = monthtext[now.getmonth()]; var thisdate = now.getdate(); var thisyear = now.getfullyear(); //this actual strong of text looks like, can modify please. if(usetitle2)$("#title2_" + thisnum ).html(thisday + " " + thismonth + " " + thisdate + ", " + thisyear); //determine am/pm if(now.gethours() < 12){ ams[thisnum].fadein(); pms[thisnum].fadeout(); }else{ ams[thisnum].fadeout(); pms[thisnum].fadein(); } } php file
<?php $tztxt = $_request['thistz']; $date = new datetime(); $tz = new datetimezone($tztxt); $date->settimezone($tz); echo $date->format(z); //echo $date; ?> sometimes page reload, other times a "connection reset" error.
when disable script, works fine.
is there way alter php settings allow script work, or should explore option?
if problem server cannot handle simultaneous requests, there few options:
- only call php script once , send information of clocks @ once. can have script return json object contains offsets. do.
- call function when previous version has finished (in callback or have return promise). possible, overly complicated , hit server still request each clock.
Comments
Post a Comment