在 javascript 循环中间更新页面答案

【问题标题】：Update a page in the middle of a javascript loop在 javascript 循环中间更新页面
【发布时间】：2014-10-16 04:21:36
【问题描述】：

我正在通过 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) 生成的每一位文本在创建后立即显示？我是否正确地猜测，如果有一种方法会大大减慢循环速度？也许我可以妥协，它立即显示一屏内容，然后以通常的方式快速循环播放其余内容。当我知道页面上的内容已经生成时，我只是不想坐几秒钟等待查看页面上的内容。

【问题讨论】：

jQuery append in loop - DOM does not update until the end的可能重复

标签： javascript jquery html performance

【解决方案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/

【讨论】：

这将无法正常工作，因为当setTimeout() 调用其回调时，i 将没有所需的值。
这只是在每个段落中打印 0。
因为for循环比超时函数快
不，仍然不对。如果你把setTimeout() 放在myFunction() 里面，那么它会起作用。您应该在 jsFiddle 中测试/实验这种代码，以便在发布之前亲自查看。
在添加 jQuery 库并将 javascript 包装在 $(function(){ }) 中并将间隔设置为更小的值之前，您的小提琴不起作用。但我想这是另一种方法，而且代码行数比我接受的答案要少。

【解决方案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 至少暂停一次。所以对于我的实际页面，我将只运行一个短循环来填充页面的开头，然后使用 setTimeout 并运行一个更长的循环。