我需要帮助，使一个活的可更新的计时器使用jQuery和javascript

Question

几天来，我一直在堆栈溢出和其他编程网站/论坛上反复提出不同的问题，但我找不到问题的答案。

基本上我想做的是创建一个计时器，可以通过另一个网页实时更新。

由于服务器的限制，我不得不使用jQuery，javascript和PHP来做这件事，我不能使用任何更高级的语言。

我无法克服在我的代码中的某处有一些东西可以在NaN中进行转换的问题。

下面我将发布完整的前端代码。

有人能告诉我为什么我的代码不能工作吗？

​

var firstTimer=10;
var x=10;

jQuery.ajax({
    dataType: 'json',
    type: 'GET',
    url: "myapi.php",
    data: "",
    success: function (data){
        firstTimer= data.minuti;
        x= data.minuti;
    }
});
    

function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10)
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;

        jQuery.ajax({
          dataType: 'json',
          type: 'GET',
          url: "myapi.php",
          data: "",
          success: function (data){
              x= data.minuti;
          }        
        });

        if(firstTimer != x){
            location.reload(true);            
        }

        if (--timer < 0) {
            alert("TIME EXPIRED");
        }
    }, 1000);
}
   



window.onload = function () {
    jQuery.ajax({
        dataType: 'json',
        type: 'GET',
        url: "myapi.php",
        data: "",
        success: function (data){
            firstTimer= data.minuti;
            x= data.minuti;
        }
        
    });

    minuti = Number(firstTimer);
    fiveMinutes = 60 * minuti,
        display = document.querySelector('#time');
    startTimer(fiveMinutes, display);
};

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

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

​

Answer 1

从它的外观上看，您似乎已经遇到了异步的辉煌奇迹。您的代码的结构就好像它是按顺序从上到下运行的，然而，由于您使用异步请求而导致的，情况并非如此。请参考Eloquent Javascript了解更多，嗯，更有说服力的解释。

简而言之:对$.ajax()调用的回调将在周围的代码之后运行，包括它们后面的行。这意味着window.onload处理程序中的minuti = Number(firstTimer);实际上是在从服务器设置minuti之前执行的。确保所有代码仅在进行异步调用之后执行，也可能解决您的NaN问题。您可以在不同的位置执行几个console.log调用，以实际掌握所用变量的当前值。