I am trying to make a ticking clock that updates every second (or every new minute is acceptable).

My problem arises because I am using ajax request.

A new ajax request is sent every time I choose a different timezone from a scroll down menu

Ajax request is executing below code.

If I reload the page with for example $timezone = ‘Asia/Tokyo’, then everything is fine. The problem arises when I do an ajax request through a drop down menu with a different timezone, like $timezone = ‘Europe/Berlin’.

The result will be an output on the website that is flickering between the two different times.

So: when I select a different timezone, like timezone for Europe/Berlin from the drop down menu, an ajax request is sent and code below is executed, and setInterval(showTime, 1000); updates the time every second, meaning, the website will show new output every second when the JavaScript function will execute. But between the JavaScript updates the time on the website will fall back to the time and timezone before the ajax request, showing time for $timezone = ‘Asia/Tokyo’! So the displayed time will be a flickering time alternating: Europe/Berlin>Asia/Tokyo>Europe/Berlin>Asia/Tokyo…changing every second.

(Also, in the output I also get a “GMT+0200 (Central European Summer Time)”-ending. But that is not important, I want to discard it from my output).

Flickering clock between timezones every second because of setInterval(showTime, 1000); https://imgur.com/a/yX0yMj0

You will most probably NOT be able to recreate the error, since my $timezone comes from an ajax request and not by setting it like $timezone = ‘Asia/Tokyo’.

<?php
$timezone = 'Asia/Tokyo';
//  $timezone = 'America/New_York';
//  $timezone = 'Europe/Berlin';
//  $timezone = 'Asia/Singapore';
        
$datetime = new DateTime('now', new DateTimeZone($timezone));
$formattedDate = $datetime->format('Y-m-d H:i:s');
        
echo '$timezone = ' . $timezone;
echo '<br>';
echo '<pre>';
print_r($datetime);
echo '</pre>';
echo '$formattedDate Shows Static Time in ' . $timezone . ' = ' .  $formattedDate;
echo '<br><br>';
        
echo '
<script>
(function() {
    var serverTime = new Date("' . $formattedDate . '");
    var serverOffset = serverTime.getTime() - new Date().getTime();
        
    function showTime() {
        var now = new Date();
        var correctTime = new Date(now.getTime() + serverOffset);
        
        var formattedTime = correctTime.getFullYear() + "-" +
                            String(correctTime.getMonth() + 1).padStart(2, "0") + "-" +
                            String(correctTime.getDate()).padStart(2, "0") + " " +
                            String(correctTime.getHours()).padStart(2, "0") + ":" +
                            String(correctTime.getMinutes()).padStart(2, "0") + ":" +
                            String(correctTime.getSeconds()).padStart(2, "0");
        
        
        document.getElementById("current-time9").textContent = correctTime;
    }
        
    setInterval(showTime, 1000); // Update every second
})();
</script>
      
<span>current-time9  </span><span id="current-time9"></span><br><br>
';
?>

Something to look into according to chat gpt:

1. Avoid Conflicts Between AJAX Requests and Clock Updates

2. Approach to Solve the Problem

Step 1: Store the Current Timezone

Use JavaScript to store the current timezone selected by the user. This way, you can ensure that the clock updates according to the correct timezone.

Step 2: Fetch Time Only Once Per Update

Fetch the new timezone and time information only when a change is made in the dropdown menu, rather than on every clock update.

Step 3: Use a Separate Function for Updating Time