为什么setInterval在JavaScript中没有正确地增加我的时钟?

时间:2015-10-11 20:20:47

标签: javascript php jquery momentjs

我想在纽约显示实际时间。我有一个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和新时间试图每秒覆盖它。好像上一次(这个div的内容)没有删除...我不知道如何创建一个jsfiddle与远程服务器的调用从PHP获取时间,所以我只有这个信息粘贴在上面:( 这可能是什么问题?

1 个答案:

答案 0 :(得分:0)

由于javascript是单线程的,因此setInterval可能会在延迟后无法运行您的函数。只要处理器准备就绪,它就会将函数添加到堆栈中。如果处理器在堆栈中有其他事件,则运行时间间隔将超过间隔时间。多个间隔或超时都是将调用添加到同一堆栈进行处理。要解决此问题,您可以使用HTML5 Web worker或尝试递归使用setTimeout。

以下是对网络工作者的好读:https://msdn.microsoft.com/en-us/hh549259.aspx