巧用setTimeout解决阻塞导致页面无法重绘

项目中遇到一个javascript问题，大致如下：

<!doctype HTML>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div>0</div>
    <a href="#">按钮</a>
    <script>
        $(function () {
            function myFun() {
              //dosomething  
            }

            $("a").click(function () {
                $("div").text(1);//代码执行，但GUI线程还未处理，代码就执行下一行
                myFun();//很耗时的方法，执行了30s，整个页面阻塞
                $("div").text(100);
            });
        });
    </script>
</body>
</html>

尝试各种办法无解，就学习了javascript单线程，以寻求解决办法。

看到Javascript是单线程的深入分析这篇博文时候，增长了知识，也获取到解决办法。

代码示例：

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>setTimeOut(fun,0)</title>
</head>
<body>
    <button id='do'> Do long calc!</button>
    <div id='status'></div>

    <script src="http://cdn.bootcss.com/jquery/1.8.2/jquery.min.js"></script>
    <script>
        $('#do').on('click', function () {
            $('#status').text('calculating....'); //此处会触发redraw事件的fired，但会放到队列里执行，直到long()执行完。

            // without set timeout, user will never see "calculating...."
            //long();//执行长时间任务，阻塞

            // with set timeout, works as expected
            setTimeout(long, 50);//用定时器，大约50ms以后执行长时间任务，放入执行队列，但在redraw之后了，根据先进先出原则
        })

        function long() {
            var result = 0
            for (var i = 0; i < 1000; i++) {
                for (var j = 0; j < 1000; j++) {
                    for (var k = 0; k < 1000; k++) {
                        result = result + i + j + k
                    }
                }
            }
            $('#status').text('calclation done');
        }
    </script>
</body>
</html>

 

更多参考文章：http://www.codeceo.com/article/javascript-threaded.html

PS：Demo示例能理解也能正确的运行，但是放在项目中，并没有效果。好在通过其他方法暂时解决了，不过这不是本文的重点了。

 

posted @ 2016-09-30 10:10  talentzemin  阅读(4877)  评论(0)  编辑  收藏  举报