多个PHP请求导致页面崩溃

Multiple PHP Requests Crashing Page

本文关键字:崩溃 PHP 请求 多个      更新时间:2023-09-26

我使用JQuery/PHP脚本显示12时钟在一个页面上。Javascript文件调用PHP文件来确定时区偏移,但是要显示12个时钟,12个PHP请求会使我的页面崩溃。

JS文件

    /*these are the div id names you added to your html*/
var clockAllDivs = [
    "clock0",
    "clockNYC",
    "clockTOR",
    "clockVAN",
    "clockLAX",
    "clockFRNK",
    "clockSAO",
    "clockTOK",
    "clockBEI",
    "clockHON",
    "clockLONDON",
    "clockPARIS",
    "clockSYDNEY"
];
var tz = jstz.determine(); // Determines the time zone of the browser client
    tz.name();
/*get timezone from this 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 you want to show for each clock*/
var clockTitles = [
    tz.name(), 
    "Los Angeles", 
    "Melbourne", 
    "Kathmandu", 
    "Tokyo", 
    "Johannesburg" 
];
var useTitle1 = false;
var useTitle2 = false;
var clockWidthHeight = 118;//width and height of the clock
var distanceBetweenClockTitle = 5;
var secondHandSpeed = 100;//in ms, the lower the number, the faster
var smoothRotation = false;//true or false
var useSecondHand = false;//set to false if you don't want to see the 2nd hand
/*location of the 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 the high res images for 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 for days and 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 this 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 the page is ready . . . 
$( document ).ready(function() {
    var dNow = new Date();
    thisOffset = dNow.getTimezoneOffset();//figure out user's timezone
    //get the timezone info for each of your clocks
    for(var i = 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 the high res images
    if(retina){
        clockFaceImg = clockFaceHighResImg;
        hourHandImg = hourHandHighResImg;
        minuteHandImg = minuteHandHighResImg;
        secondHandImg = secondHandHighResImg;
        amImg = amHighResImg;
        pmImg = pmHighResImg;
    }
    //determine if you want to use the second hand
    if(useSecondHand == false){
        imagesToLoad = imagesToLoad - 1;
    }   
    //change the call interval for smooth rotation
    if(smoothRotation == true && useSecondHand){
        callInterval = 50;
    }
    //create each clock visually
    for(var i = 0;i<clockAllDivs.length;i++){
        var clockAllDiv = $("#" + clockAllDivs[i]);
        //add bg
        clockAllDiv.append("<div id='analog-clock" + i + "' 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_" + i + "' 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 the div for 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 to see if the images are 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 an image is loaded
    imgsLoaded++;
    if(imgsLoaded == imagesToLoad){//once all the images are loaded
        for(var i = 0;i<clockAllDivs.length;i++){
            //adjust widths and 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 the position of the hands
            if(useSecondHand)secondHands[i].css( { "left": (clockWidthHeight - secondHands[i].width())/2 + "px", "top": (clockWidthHeight - secondHands[i].height())/2 + "px" });//set x and y pos
            minuteHands[i].css( { "left": (clockWidthHeight - minuteHands[i].width())/2 + "px", "top": (clockWidthHeight - minuteHands[i].height())/2 + "px" });//set x and y pos
            hourHands[i].css( { "left": (clockWidthHeight - hourHands[i].width())/2 + "px", "top": (clockWidthHeight - hourHands[i].height())/2 + "px" });//set x and y pos     
            //if(useSecondHand)setSecondStart();
            //fade the clocks in
            $("#" + clockAllDivs[i]).animate({ opacity:1 }, "slow");
        }
        //call rotatehands function
        setInterval(function(){
            rotateHands();
        }, callInterval);//1000 = 1 second
        if(!smoothRotation)rotateHands();//make sure they start in the right position
    }
}

function rotateHands(){
    for(var i = 0;i<clockAllDivs.length;i++){
        //get current time/date from local computer
        var now = new Date();
        now.setMinutes(now.getMinutes() + offsets[i] + thisOffset);
        //set the second hand
        var secondAngle = 6 * now.getSeconds();//turn the time into 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 the hand angle
            }else{
                if(secondAngle == 0){
                    secondHands[i].rotate(-6, 'abs');//set the hand angle
                }
                secondHands[i].rotate({ animateTo:secondAngle, duration:secondHandSpeed}, 'abs');
            }
        }
        //set the minute hand
        var minuteAngle = 6 * now.getMinutes() + secondAngle/60;//turn the time into angle
        minuteHands[i].rotate(minuteAngle, 'abs');//set the hand angle
        //set the hour hand
        var hourAngle = 360/12 * currentHr;//turn the time into angle
        var hourAngleWOffset = hourAngle + minuteAngle/12;
        hourHands[i].rotate(hourAngleWOffset%360, 'abs');//set the hand angle
    }
    isStart = false;
}
//get timezone info from the 
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 the php script has called first
function allTZChecked(){
    tzChecked++;
    if(tzChecked == clockAllDivs.length){
        AnalogClock();
        for(var i = 0;i<clockAllDivs.length;i++){
            var now = 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 is what the actual strong of text looks like, but you can modify it as you 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文件

<?php
    $tzTxt = $_REQUEST['thisTz'];
    $date = new DateTime();
    $tz = new DateTimeZone($tzTxt);
    $date->setTimezone($tz);
    echo $date->format(Z);
    //echo $date;
?>

有时页面会重新加载,有时我得到一个"连接被重置"错误。

当我禁用这个脚本时,一切正常。

是否有办法改变我的PHP设置,以允许这个脚本工作,或者我应该探索另一个选项?

如果问题是您的服务器无法处理同步请求,有几个选项:

    只需调用一次php脚本,一次发送所有时钟的信息。您可以让脚本返回一个包含所有偏移量的json对象。这就是我要做的。
  1. 在上一个版本完成时调用该函数(在回调中或让它返回一个promise)。这是可能的,但过于复杂,你会给服务器带来额外的请求。