为什么 setInterval 不能在 JavaScript 中正确增加我的时钟？

Question

我想显示纽约的实际时间。我有一个 html div：

<div id="time"></div>

还有 - 我有一个返回实际时间的 php 脚本：

<?php
  date_default_timezone_set('UTC'); 
  echo time();
?>

它作为一个时间戳。

现在，我创建了一个 js 脚本：

var serverTime;
        moment.tz.add('America/New_York|EST EDT|50 40|0101|1Lz50 1zb0 Op0');
        function fetchTimeFromServer() {    
             $.ajax({
        type: 'GET', 
        url: 'generalTime.php',
        complete: function(resp){
            serverTime = resp.responseText;

            function updateTimeBasedOnServer(timestamp) { // Take in input the timestamp
                var calculatedTime = moment(timestamp).tz("America/New_York");
                var dateString = calculatedTime.format('h:mm:ss A');
                $('#time').html(dateString + ", ");
            };

            var timestamp = serverTime*1000;
            updateTimeBasedOnServer(timestamp);
            setInterval(function () {
                timestamp += 1000; // Increment the timestamp at every call.
                updateTimeBasedOnServer(timestamp);
            }, 1000);

        }
        })
        };

        fetchTimeFromServer();

        setInterval(function(){
            fetchTimeFromServer();

        }, 5000);

其背后的想法是我想从服务器获取数据，将其显示在我的网页上，然后每秒递增 5 秒，然后再次从服务器获取时间（以保持与服务器）。稍后 - 继续这样做，获取时间，增加 5 秒，再次获取，等等。

它工作......几乎。网页保持打开一段时间后，我可以看到实际时间，但它“闪烁”，我可以看到它显示不同的时间 - 很难解释，但看起来那个 div 和新的time 试图每秒覆盖它。好像之前的时间（这个 div 的内容）没有被删除......我不知道如何创建一个调用远程服务器以从 php 获取时间的 jsfiddle，所以我只在上面粘贴了这些信息:( 这里可能有什么问题？

Answer 1

由于 javascript 是单线程的，因此 setInterval 在延迟后可能无法真正运行您的函数。它将函数添加到堆栈中，以便在处理器准备好后立即运行。如果处理器在堆栈中有其他事件，则运行时间将超过间隔时间。多个间隔或超时都将调用添加到同一个堆栈进行处理。为了解决这个问题，您可以使用 HTML5 web workers 或尝试递归地使用 setTimeout。

这是一篇关于网络工作者的好书：https://msdn.microsoft.com/en-us/hh549259.aspx