Question

我已经在javascript中创建了这个无限循环，以便运行setTimeout函数。问题在于，通过这样做，我的页面甚至根本没有加载。

这是JavaScript代码：

function blurDiv() {
    console.log("here");
    rankingList.style.filter="blur(0.7)";
} 

function loadContent() {
    console.log("loaded");
    $( "#ranking-container" ).load("index.php #ranking-list");
    rankingList.style.filter="blur(0)";  
}

while(true) {
    setTimeout(blurDiv, 4000);

    setTimeout(loadContent, 5000); 
}

我期望循环只会在那5秒钟后运行另一个迭代。

Answer 1

使用setInterval()代替while(true){setTimeout()}

function blurDiv() {
    console.log("here");
    // Other stuff here
} 

function loadContent() {
    console.log("loaded");
    // Other stuff here
}


setInterval(blurDiv, 5000);
setInterval(loadContent, 5000);

说明：

setTimeout()是一个异步函数，这意味着JS不等待它完成就可以继续运行。因此，在循环while(true)中，它每回合都会创建两个超时回调，这将导致大量（非常大量）的超时回调，并且永远不会摆脱该while(true)循环。

但是，通过使用setInterval()，您可以创建一个计时器，该计时器将在每个周期（间隔）内触发回调。

Answer 2

哈伦的答案足以解决您的问题。另外，如果您想更多地了解为什么会得到这种行为，那是由于一种叫做Event Loop的事情。

看看杰克·阿奇博尔德（Jake Archibald）出色的video。

Answer 3

您可以使用setInterval（请参阅其他答案）或回调

function loadIt()
   $("#ranking-container").load("index.php #ranking-list",function() {
     rankingList.style.filter="blur(0.7)";
     setTimeout(loadIt,4000)
   });
   rankingList.style.filter="blur(0)";  
 }
 loadIt();

将这个无限循环添加到我的javascript代码后，为什么我的页面无法加载？

3 个答案: