javascript - 需要帮助使用 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对于这个问题有更多，嗯， Eloquent 解释。

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