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函数来解决问题。

＆＃13;

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);

＆＃13;

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

＆＃13;

Answer 2

好吧，它不起作用，因为你在没有setTimeout中的秒数的情况下调用timer（）。所以你需要通过它。

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

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);

＆＃13;

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

＆＃13;

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

2 个答案: