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

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 .

您可以使用在 a 和 i< 上带有闭包的内部函数来实现此目的，而不是创建第二个函数或将 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();
}

<小时/>

If I add window.location.reload(); after each pause(500) invocation, this seems to force my javascript to exit

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

<小时/>

If I insert var answer=prompt("hello"); after each pause(500), this does exactly what I want.

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