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

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

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

当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();
}

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

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

如果我在每个pause(500)之后插入var answer=prompt("hello");，这正是我想要的。

prompt、alert和confirm几乎是唯一可以暂停javascript线程的东西。在某些浏览器中，甚至这些浏览器仍然会阻塞UI线程。

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

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

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);
   }
}

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);

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/

相关内容

最新更新

热门标签：