如下，请问是否有简单的方法实现 在浏览器中 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 id="demo" onclick="myfunction()">xx</h1><script>var x=0;function myfunction(){   document.getElementById("demo").innerHTML=++x;   if(x<10)setTimeout(myfunction,1000);}</script>

Answer 2

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

Answer 3

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