如下，请问是否有简单的方法实现 在浏览器中 1秒显示1个数字？

Question

下面是要实现 在H1中1秒显示1个数字，但执行后浏览器中等10秒 显示11，而console是1秒显示1个数字，跟我要的效果不一样

<h1 id="demo" onclick="myfunction()">
xx
</h1>
<script>
function myfunction(){
var x =0 ;
do{
x++;
console.log(x);
document.getElementById("demo").innerHTML=x;
sleep(1000);

}
while (x<10);
}

 function sleep(n) { 
            var start = new Date().getTime();
            while (true) if (new Date().getTime() - start > n) break;
} 

</script>

Answer 1

你这样实现的sleep是没用的，因为JavaScript是单线程运行的，cpu的运行时间都会消耗在循环中，页面根本就没时间进行渲染，所以要等循环完全结束后才会显示出结果。其实JavaScript本身有计时器啊，怎么不会利用啊：<h1&nbsp;id="demo"&nbsp;onclick="myfunction()">xx</h1><script>var&nbsp;x=0;function&nbsp;myfunction(){&nbsp;&nbsp;&nbsp;document.getElementById("demo").innerHTML=++x;&nbsp;&nbsp;&nbsp;if(x<10)setTimeout(myfunction,1000);}</script>

Answer 2

<script>var&nbsp;n&nbsp;=&nbsp;1;var&nbsp;int=self.setInterval(function&nbsp;clock(){console.log(&nbsp;n++&nbsp;);},1000)</script>

Answer 3

js中SetInterval与setTimeout用法了解一下。