0

我想用这样的东西动画一个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）之后，这正是我想要的（即更新页面），除了我不想要烦人的提示，因为我实际上不需要任何用户输入。

那么......在我暂停后是否可以调用一些东西来强制刷新页面，不请求用户的任何输入，并允许我的脚本继续？

4

5 回答 5

2

当 javascript 线程运行时，渲染线程不会更新页面。你需要使用setTimeout.

无需创建第二个函数或暴露i给外部代码，您可以使用带有闭包的内部函数来实现这一点aand 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 线程。

于 2012-09-05T19:47:31.813 回答
1

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

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

于 2012-09-05T19:45:17.307 回答
1

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);
   }
}
于 2012-09-05T19:47:37.073 回答
0 
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/

于 2012-09-05T19:56:36.697 回答
0 
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);
于 2012-09-05T19:49:04.910 回答