Question

我正在尝试根据包含要完成的大量秒数的隐藏字段为表格的每一行制作一个倒数计时器。以下是我到目前为止所做的事情：

function countdownProcedure() {
    var interval = 1000;
    var i = 0;
    var seconds;
    $(".rfqTbl tr").each(function() {
        if(i > 0) {
            seconds = $(this).find("#sqbTimestamp").text();
            var days = Math.floor(seconds / (60*60*24));
            seconds -= days * 60 * 60 * 24;
            var hours = Math.floor(seconds / (60*60));
            seconds -= hours * 60 * 60;
            var minutes = Math.floor(seconds / 60);
            seconds -= minutes * 60;
            if(days < 1) { days=""; }
            $(this).find("#countDown").html(days + "<pre> Days</pre> " + hours + "<pre>:</pre>" + minutes + "<pre>:</pre>" + seconds);
            if(days > 1) {
                $(this).find("#countDown").css({
                    'color':'#2A7F15',
                    'font-weight':'bold'
                });
            };
            if(days < 1) {
                $(this).find('#countDown').css('color','red');
                $(this).find('#countDown pre:nth-of-type(1)').css('display','none');
            }
            if(seconds < 10) {
                $(this).find("#countDown").append("&nbsp;");
            };
            if(minutes < 60){ interval = 1000; };
        }
        i++; 
    }); 
    setInterval(countdownProcedure,interval);
};

然而，我的问题是我试图让这个功能运行（实际上每秒或30），以便显示的时间会更新，从而'倒计时'。我遇到的问题是在firefox和safari中浏览器只是在第一次倒计时后挂起而且chrome什么也没做（我猜它有一个安全的防护来防止它挂起）。

非常感谢任何帮助！

Answer 1

您正在运行大量setInterval()次呼叫，因此事件队列会挤满您的功能。

我认为，你的意思更像是你职能结束时的setTimeout()。

function countdownProcedure(){
  // all your logic
  setTimeout(countdownProcedure,interval);
};

不同的是，setInterval()会每隔x秒>运行您的代码，直到您告诉它停止为止。

另一方面，
setTimeout()只需在x秒后运行您的代码。

Answer 2

为 .sqbTimestamp

更改分支的所有ID Ex： #sqbTimestamp

在HTML文档中，应该只存在1个带有一些id的元素，如果你设置多个具有相同id的元素，可能会出现意外结果（如浏览器挂起）。

此外，您设置天=“”，然后执行以下比较 if（days＆gt; 1）

Answer 3

我认为你的算法错了。你递归地设置每次调用自己的间隔并设置新的间隔等等...... 您必须稍微更改算法以使其清洁。

JavaScript冻结浏览器

3 个答案: