Question

我想让一个盒子消失，然后通过使用循环重新出现。问题是虽然循环运行直到i = 10，但框架根本不会出现。有人可以解释一下吗？

    for(var i=0;i<10;i++){
        if(document.getElementById("box").style.display=="none"){
            document.getElementById("box").style.display="block";}
        else{
            document.getElementById("box").style.display="none";
        }
        console.log(i);
    }

Answer 1

最简单的解释是循环迭代在渲染发生之前完成，而您只获得最终结果。

查看代码的这个修改版本，它通过使用超时来强制绘图：

for (var i = 0; i < 10; i++) {
  setTimeout(toggle, i * 100);
}

function toggle() {
  if (document.getElementById("box").style.display == "none") {
    document.getElementById("box").style.display = "block";
  } else {
    document.getElementById("box").style.display = "none";
  }
}

#box {
  width: 50px;
  height: 50px;
  background: #eee;
}

<div id="box"></div>

Answer 2

通常当你简单地用（while，for，etc ......）循环时，它将以时钟（纳秒或毫秒）运行......

对于计算机，您的包装盒正在出现并消失。但对人类而言，仅仅因为它太快了。

我建议你试试一些Javascript动画算法，比如这个

http://www.w3schools.com/jquery/eff_fadein.asp

我的循环出了什么问题？

2 个答案: