项目中遇到一个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示例能理解也能正确的运行，但是放在项目中，并没有效果。好在通过其他方法暂时解决了，不过这不是本文的重点了。

巧用setTimeout解决阻塞导致页面无法重绘的更多相关文章

  1. CSS新特性contain，控制页面的重绘与重排

    在介绍新的 CSS 属性 contain 之前,读者首先需要了解什么是页面的重绘与重排. 之前已经描述过很多次了,还不太了解的可以先看看这个提高 CSS 动画性能的正确姿势. OK,下面进入本文正题, ...

  2. 导致flash屏幕重绘的几种方式及避免重绘的方法

    导致屏幕重绘的几种原因: 1.最常见的是情况就是舞台上的可视组件在形状.位置.状态(alpha, scale…)发生改变的时候会触发Flash Player 的重绘. 2.当一个DisplayObje ...

  3. HTML页面的重绘（repaint）和重流（reflow）

    重流(Reflow)是指布局引擎为frame计算图形的过程. frame是一个矩形,拥有宽高和相对父容器的偏移.frame用来显示盒模型(content model), 但一个content mode ...

  4. Asp.net项目因Session阻塞导致页面打开速度变慢

    发现罪魁祸首是Session阻塞造成的.默认情况下session状态是“可写状态”(EnableSessionState=”true”),即当用户打开任何一个页面时,该页面的Session就会持有一个 ...

  5. WinFom解决最小化最大化后重绘窗口造成闪烁的问题

    网上两种方案(可协同) 1 设置双缓冲: SetStyle(ControlStyles.UserPaint, true); SetStyle(ControlStyles.AllPaintingInWm ...

  6. 页面重绘(repaint)和回流(reflow)

    前言 页面显示到浏览器上的过程: 1.1.生成一个DOM树. 浏览器将获取到的HTML代码解析成1个DOM树,包含了所有标签,包括display:none和动态添加的节点. 1.2.生成样式结构体. ...

  7. 关于document.write()方法重绘页面问题

    学习的时候,document.write()被告知是用来将内容写进页面里面,同时也被告知document.write()方法会重绘页面,但是关于什么时候会重绘,什么时候不会重绘页面没有太多解释. 首先 ...

  8. &#65279导致页面顶部空白一行解决方法 【】

    2016年11月7日10:57:10 模板文件生成html文件之后会在body开头处加入一个可见的控制符&#65279,导致页面头部会出现一个空白行.原因是页面的编码是UTF-8 + BOM. ...

  9. &#65279导致页面顶部空白一行解决方法

    模板文件生成html文件之后会在body开头处加入一个可见的控制符&#65279,导致页面头部会出现一个空白行.原因是页面的编码是UTF-8 + BOM. 这种编码方式一般会在windows操 ...

随机推荐

  1. ES5 对象的扩展(Object.preventExtensions)、密封(Object.seal)和冻结(Object.freeze)

    前面提到 ES5 对象属性描述符,这篇看看对象的扩展.密封和冻结. 扩展对象 Object.preventExtensions Object.isExtensible 密封对象 Object.seal ...

  2. EF 数据库连接字符串-集成安全性访问 SQL Server

    使用 Windows 集成安全性访问 SQL Server 如果您的应用程序运行在基于 Windows 的 Intranet 上,则也许可以将 Windows 集成身份验证用于数据库访问.集成安全性使 ...

  3. [WPF系列]-参考文献

      DataTemplates Data Templating Overview Styling and Templating DataTemplate Class FrameworkTemplate ...

  4. 如何读取Access里的OLE类型的图片

    身份证一类读卡器读取的照片信息,保存在Access数据库中一般为OLE型字段,图片为BMP格式,因为是用其读卡器写入的,其数据类型为常二进制数据. 再用报表或EXCEL读取这些图片时,如果将该图片字段 ...

  5. 某中国500强企业BI系统成功应用案例

    随着某集团20多年的不断发展发展,现已成为中国500强.中国大企业集团竞争力前25强.中国信息化标杆企业和国家重点火炬高新技术企业.拥有总资产数十亿元.员工数万名,涉足电力.家电.能源.等多个行业,并 ...

  6. 帆软报表FineReport中数据连接的JDBC连接池属性问题

    连接池原理 在帆软报表FineReport中,连接池主要由三部分组成:连接池的建立.连接池中连接使用的治理.连接池的关闭.下面就着重讨论这三部分及连接池的配置问题. 1. 连接池原理 连接池技术的核心 ...

  7. 【2016-10-26】【坚持学习】【Day13】【WCF】【EF + Data Services】

    今天做了一个demo, EF+Data Services 先建立一个网站项目 添加一个ADO.NET 数据模型 相当于一个EF容器,用来连接MSSQL数据库 添加一个WCF Data Services ...

  8. vi快捷键

    /** * eclipse内置快捷: * * * 导入包:Ctrl+Shift+O * Ctrl+T 查看一个类的继承关系树,是自顶向下的,再多按一次Ctrl+T, 会换成自底向上的显示结构. 提示: ...

  9. 安卓开发：一种快速提取安卓app的UI图标资源的方法

    在做安卓设计时,找美工设计界面的漂亮图标是必不可少的,但是对于一个初创团队来说,请一个UI的成本其实也挺高的,此时对于一个偏技术的产品经理来说,从其他成熟的产品的apk中提取图标就是一个很便捷的方法, ...

  10. CentOS 新增swap交换空间

    在centos 6.4 64位系统中安装oracle 10g数据库软件,但由于交换空间过小导致检查不通过: 因此需要增加交换空间的大小. 第一步:在opt目录下新建swap交换文件,并设置其大小为2G ...