Question

我通过javascript在页面上生成了很多内容，我注意到在javascript运行完毕之前页面根本不会显示任何内容。如果你运行这个简单的页面，你可以在控制台中看到倒计时的数字，然后当循环完成时，最后在页面上加载内容。

<html>
<head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
</head>

<body>
    Hello

    <script>
        $(function(){
            for(var i=9999; i>0; i--){
                console.log(i)
                $('body').append('<p>' + i*i*i + '987987 Lorem ipsum dolor sit amet. </p>')
            }
        })
    </script>
</body>

</html>

有没有办法a）立即显示静态页面内容，b）创建生成的文本的每一位？我是否正确地猜测，如果有一种方法会使循环减慢很多？也许我可以妥协，它会立即显示屏幕内容，然后以通常的方式快速循环通过其余内容。当我知道它已经生成时，我只是不想坐下几秒钟等待查看页面上的内容。

Answer 1

试试这个

        for(var i=50; i>0; i--){
            myFunction(i);

        }

        function myFunction(i){
            setTimeout(function(){$('body').append('<p>' + i +'</p>');;},10)


        }

添加了小提琴http://jsfiddle.net/thelgevold/pzcnnfgL/

Answer 2

    $(function(){
        var i= 9999;
        var dothis = function()
        {
            console.log(i);
            $('body').append('<p>' + i*i*i + '987987 Lorem ipsum dolor sit amet. </p>')
            if(i == 0) { clearInterval(x); }
            i--;
        };
        var x = setInterval(dothis, 1);
   });

你可以试试这个！

它比for循环慢一些，但可以根据需要使用。

在javascript循环中更新页面

2 个答案: