如何将 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 对象声明 seconds 值是否有效？赞$("#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>

Answer 2

它不起作用，因为您在 setTimeout 中没有秒数就调用 timer()。所以你需要通过它。

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);
        setTimeout(timer, 1000, seconds);
    }
}

timer(30);

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

但作为仅供参考，setTimeout 不准确，因此它的结束时间将关闭。所以，你可以做什么？设置一个日期并从中减去当前时间。

function startTimer(seconds) {

  var endTime = new Date();
  endTime.setSeconds(endTime.getSeconds() + seconds);
  timer();

  function timer() {
    var seconds = Math.ceil((endTime - new Date()) / 1000)

    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 {
      console.log(seconds);
      setTimeout(timer, 1000);
    }
  }
}
startTimer(30);

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