Question

exports.show_time = function(n, id) {
    for (var i = n; i > -1; i--) {
        (function(t) {
            setTimeout(function() {
                var $timer = $('#' + id);
                var str_time = t + "s";
                $timer.text(str_time);
                $timer.attr('unable', true);
                if (t == 0) {
                    $timer.text("get phone code");
                    $timer.attr('unable', false);
                }
                console.log(t);
            }, 1000);

        })(i);
    }

};

我写上面的代码在页面上实现90s倒计时，但页面根本没有变化，如果我调试我的代码我可以在页面上看到倒计时，但顺序不对。任何人都可以帮助我。

Answer 1

您需要使用setInterval（），在您的情况下，您可以创建{1}}计时器，这些计时器将在1秒后执行，而不是每1秒执行一次

var exports = {};
exports.show_time = function(n, id) {
  var $timer = $('#' + id);
  $timer.attr('unable', true);
  var interval = setInterval(function() {
    var str_time = n + "s";
    $timer.text(str_time);
    if (n == 0) {
      $timer.text("get phone code");
      $timer.attr('unable', false);
      clearInterval(interval)
    }
    n--;
  }, 1000);
};

exports.show_time(10, 'time')

Answer 2

在你的代码中，循环同时设置所有定时器，因此它们会在1秒钟后全部触发。然而，令人惊讶的是他们没有以正确的顺序激发......无论如何，你可能会找到原因阅读关于Javascript计时器的这个很好的解释（来自jQuery自己的创建者）：

http://ejohn.org/blog/how-javascript-timers-work/

话虽如此，这是一个多用途倒计时功能：

function countdown (sec, onTick) {
    onTick(sec);
    if (sec) setTimeout(function () {
        countdown(--sec, onTick);
    }, 1000);
}

onload = function () {
    countdown(3, function (sec) {
        document.write(sec ? sec + ' ' : 'BOOM!');
    });
};

90秒倒计时与javascript关闭

2 个答案: