JavaScript冻结浏览器

JavaScript Freezes Browser

本文关键字：浏览器 冻结 JavaScript      更新时间：2023-09-26

我正试图根据一个隐藏字段为表的每一行制作一个倒计时计时器，该字段包含要完成的秒数。以下是我迄今为止所做的：

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什么也没做（我想它有一个安全的保护装置来防止它挂起）。

任何帮助都将不胜感激！

您正在运行大量的setInterval()调用，因此事件队列中挤满了您的函数。

我认为，你的意思更像是函数末尾的setTimeout()。

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

不同的是，setInterval()将每x秒运行一次代码，直到您告诉它停止。

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

更改类的所有id，例如：#sqbTimestamp为.sqbTimestamp

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

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

我认为你的算法是错误的。你正在递归地设置间隔，这些间隔每次都会调用自己，并设置新的间隔等等。。。你必须稍微改变一下你的算法才能把它清理干净。

相关文章：