Question

我有一个元素，我希望在用户在那里几秒后出现在我的页面上。为此，我使用了sleep函数并将其放在$（document）.ready（）中。这个想法是页面将加载，然后睡眠将开始。然而，我所看到的是睡眠功能实际上是在延迟页面加载。知道什么是错的吗？

function sleep(miliseconds) {
       var currentTime = new Date().getTime();

       while (currentTime + miliseconds >= new Date().getTime()) {
       }
   }


$(document).ready(function(){   
    if ( $( ".email_tab" ).length ) {
        sleep(8000);
$(".email_tab").toggleClass("email_tab_hide").toggleClass("email_tab_appear");
}
});

Answer 1

在JS中，您应该使用setTimeout();而不是自定义sleep()函数

setTimeout(function(){
     $(".email_tab").toggleClass("email_tab_hide").toggleClass("email_tab_appear");
}, 8000)

Answer 2

$(document).ready回调实际上在页面完全加载之前运行。它只是确保整个DOM可用于操作。然后，您的sleep忙碌循环会延迟其余的加载过程。您应该使用setTimeout代替。

Answer 3

睡眠功能会消耗您的浏览器cpus并将其冻结。

你想要的是：

$(document).ready(function(){   
    if ( $( ".email_tab" ).length ) {
        setTimeout(function() {
            $(".email_tab").toggleClass("email_tab_hide").toggleClass("email_tab_appear");
        }, 8000);
    }
});

您的问题可能是文档准备就绪，且email_tab长度为零时，setTimeout将无法运行。

JS推迟了页面加载，即使它已经在document.ready中

3 个答案: