JavaScript冻结浏览器

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

更改类Ex的所有ID：#sqbTimestamp for .sql Timestamp

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

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

Answer 3

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