项目中遇到一个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. x01.os.20: compile linux-0.11 on the ubuntu

    为什么学习 linux 正如不能依靠美国的 GPS 为我们的导弹指示目标一样,很难想像用运行 windows 的电脑去同美国进行信息战.而朝鲜的网络崩溃,再次警示国人,信息战.网络战离我们并不遥远.l ...

  2. C#中使用FreeImage库加载Bmp、JPG、PNG、PCX、TGA、PSD等25种格式的图像（源码）。

    其实我一直都是喜欢自己去做图像格式的解码的(目前我自己解码的图像格式大概有15种),但是写本文主要原因是基于CSDN的这个帖子的: http://bbs.csdn.net/topics/3905104 ...

  3. 从一个url输入浏览器到页面渲染出来，这个过程都发生了哪些事情？

    经典问题:在浏览器输入一个url后,会发生什么事情呢? (1)假设是简单的http请求(GET),IPV4,无代理. 浏览器先查看浏览器缓存-系统缓存-路由器缓存,若缓存中有,请略过中间步骤,直接跳到 ...

  4. Linux 之 目录和文件

    1  初识 1.1  终端 打开终端: Ctrl + Alt + F1 ~ F6 图形界面: Ctrl + Alt + F7 1.2  命令 1)  一般 date; cal - calendar; ...

  5. Learn Python The Hard Way ex41中的程序

    import random from urllib import urlopen import sys WORD_URL = "http://learncodethehardway.org/ ...

  6. Struts2文件上传和文件下载

    一.单个文件上传 文件上传需要两个jar包: 首先制作一个简单的页面,用于实现文件上传 <h1>单个文件上传</h1> <s:form action="uplo ...

  7. Hibernate延迟加载、三种状态、脏检查 缓存

    一.持久化对象的唯一标识 java中按内存地址不同区分同一个类的不同对象,关系数据库用主键区分同一条记录,Hibernate使用OID来建立内存中的对象和数据库中记录的对应关系 什么是OID? 解析: ...

  8. IIS7.5使用web.config设置伪静态的二种方法(转)

    近几天公司里开发的项目有几个运行在IIS7.5上,由于全站采用的是伪静态,因此从网上找到两两种方法来实现.这两种方法各有优势:第一种比较灵活,只要把文件拷到根目录下,即可直接显示所有伪静态页面(适用于 ...

  9. Libsvm Matlab 快速安装教程 （适用于Win7+, 64bit, and Matlab2016a+）

    近日在开始学习Machine Learning SVM 相关算法,将Matlab平台安装SVM的步骤记录如下,亲测可用: 开发环境: Windows 8 64 bit, Matlab 2016a, S ...

  10. LeetCode:N-Queens I II（n皇后问题）

    N-Queens The n-queens puzzle is the problem of placing n queens on an n×n chessboard such that no tw ...