Question

我想用以下内容为html页面制作动画：

function showElements(a) {   
  for (i=1; i<=a; i++)  {  
    var img = document.getElementById(getImageId(i));  
    img.style.visibility = 'visible';  
    pause(500);  
  }  
}

function pause(ms) {
  ms += new Date().getTime();
  while (new Date() < ms){}
}

不幸的是，只有javascript完成后页面才会呈现。

如果我添加

 window.location.reload();

每次暂停后

（500）;调用，这似乎迫使我的JavaScript退出。（至少，我没有在我的javascript中找到下一行代码。）

如果我插入

 var answer=prompt("hello");

每次暂停（500）之后，这完全符合我的要求（即更新页面），除了我不想要一个恼人的提示，因为我实际上并不需要任何用户输入。

所以...是否某些我可以在暂停后调用，强制刷新页面，不请求用户输入任何内容，并允许我的脚本继续？

Answer 1

当javascript线程正在运行时，呈现线程将不会更新页面。您需要使用setTimeout。

您可以使用带有i和a上的闭包的内部函数来实现此功能，而不是创建第二个函数或将i公开给外部代码：

function showElements(a) {
    var i = 1;
    function showNext() {
        var img = document.getElementById(getImageId(i));  
        img.style.visibility = 'visible'; 
        i++;
        if(i <= a) setTimeout(showNext, 500);
    }
    showNext();
}

如果我在每次window.location.reload();次调用后添加pause(500)，这似乎会强制我的javascript退出

window.reload()使浏览器丢弃当前页面并从服务器重新加载，因此您的javascript停止。

如果我在每个var answer=prompt("hello");之后插入pause(500)，这就完全符合我的要求。

prompt，alert和confirm几乎是唯一可以实际暂停javascript线程的内容。在某些浏览器中，即使这些仍然阻止了UI线程。

Answer 2

您的pause()函数在UI线程上休眠并冻结浏览器这是你的问题。

相反，您需要稍后调用setTimeout来调用函数。

Answer 3

Javascript本质上是事件驱动/非阻塞（这是javascript / Node.js的优点之一）。试图规避内置功能绝不是一个好主意。为了做你想做的事，你需要安排你的活动。一种方法是使用setTimeout和简单递归。

function showElements(a) {   
  showElement(1,a);
}

function showElement(i, max) {
   var img = document.getElementById(getImageId(i));  
   img.style.visibility = 'visible';
   if (i < max) {
      setTimeout(function() { showElement(i+1, max) }, 500);
   }
}

Answer 4

var i = 1;
function showElements(a) {   
    var img = document.getElementById(getImageId(i));  
    img.style.visibility = 'visible';  
    if (i < a) {
      setTimeout(function() { showElements(a) }, 500);  
    }
    i++;
}
showElements(5);

Answer 5

function showElements(a,t) {   
  for (var i=1; i<=a; i++)  {  
    (function(a,b){setTimeout(function(){
      document.getElementById(getImageId(a)).style.visibility = 'visible'},a*b);}
    )(i,t)  
  }  
}

t参数是延迟，例如500

演示：http://jsfiddle.net/doktormolle/nLrps/

如何在不退出javascript的情况下从javascript更新网页

5 个答案: