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

不同之处在于，它将每 x secondssetInterval()运行一次您的代码，直到您告诉它停止。

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

Answer 2

更改类的所有 ID 例如：#sqbTimestamp for .sqbTimestamp

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

此外，您正在设置days=""然后进行以下比较if (days > 1)

Answer 3

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