javascript - 如何为计时器使用 Ajax 响应值？

Question

我想制作一个从 Ajax 调用中获取其值的计时器。这是我的代码:

function timer(seconds) {
    var days        = Math.floor(seconds/24/60/60);
    var hoursLeft   = Math.floor((seconds) - (days*86400));
    var hours       = Math.floor(hoursLeft/3600);
    var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
    var minutes     = Math.floor(minutesLeft/60);
    var remainingSeconds = seconds % 60;
    if (remainingSeconds < 10) {
        remainingSeconds = "0" + remainingSeconds;
    }
    document.getElementById('countdown').innerHTML = hours + "tundi " + minutes + "minutit " + remainingSeconds+ "sekundit";
    if (seconds == 0) {
        clearInterval(countdownTimer);
        document.getElementById('countdown').innerHTML = "Completed";
    } else {
        seconds--;
        console.log(seconds);
    }
    var countdownTimer = setInterval('timer()', 1000);
}
$.ajax({
      type: "GET",
      url: "AjaxHandler.php",
      dataType: "JSON",
      data:{action:"gym"},
      success: function(result){
        timer(result); // receiving php strtotime(), value something like 150000
    },
    error:function(){
          console.log("Error: Unknown Error")
    }
});

现在的问题是我无法在作用域外获取 countdownTimer 的值，所以我将 countdownTimer 放在函数内。但这是行不通的，我知道这一点。

向 html 对象声明秒值是否有效？像 $("#test").val(response)

所以我的问题是:如何让这个计时器工作？

Answer 1

以下示例演示了如何使用 callback 函数来解决您的问题。

function timer(seconds, countdownTimer, callback) {
  var days = Math.floor(seconds / 24 / 60 / 60);
  var hoursLeft = Math.floor((seconds) - (days * 86400));
  var hours = Math.floor(hoursLeft / 3600);
  var minutesLeft = Math.floor((hoursLeft) - (hours * 3600));
  var minutes = Math.floor(minutesLeft / 60);
  var remainingSeconds = seconds % 60;
  if (remainingSeconds < 10) {
    remainingSeconds = "0" + remainingSeconds;
  }
  document.getElementById('countdown').innerHTML = hours + "tundi " + minutes + "minutit " + remainingSeconds + "sekundit";
  if (seconds == 0) {
    clearInterval(countdownTimer);
    document.getElementById('countdown').innerHTML = "Completed";
  } else {
    seconds--;
    console.log(seconds);
  }
  
  //Pass seconds param back to the caller.
  callback(seconds);
  
}


//Inside the ajax success function you should call following code snippet instead of calling timer(30).
//We pass the countdownTimer param into the timer function as well.

var countdownTimer = null,
    seconds = 30;
countdownTimer = setInterval(function() {
  timer(seconds, countdownTimer, function(_seconds){
      seconds = _seconds;
  })
}, 1000);

<div id="countdown"></div>