项目中遇到一个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. Snapshot Instance 操作详解 - 每天5分钟玩转 OpenStack（36）

    本节我们通过日志详细讨论 instance 的 snapshot 操作. 有时候操作系统损坏得很严重,通过 Rescue 操作无法修复,那么我们就得考虑通过备份恢复了.当然前提是我们之前对instan ...

  2. docker

    docker pull centos docker images docker run -ti centos cat /etc/redhat-release ##################### ...

  3. WIN7下django1.8下载安装

    前言:公司电脑上django是在pycharm上下载自动安装的,家里电脑没安pycharm,所以自己手动安装. django下载地址:https://www.djangoproject.com/dow ...

  4. 架构实例之SpringTest

    架构实例之SpringTest 1.开发工具和开发环境       开发工具: MyEclipse10,JDK1.6.0_13(32位),Tomcat7.0(32位),mysql5.7.13 开发环境 ...

  5. EF6 DataMigration 从入门到进阶

    引言 在EntityFramework的开发过程中我们有时因需求变化或者数据结构设计的变化经常会改动表结构.但数据库Schema发生变化时EF会要求我们做DataMigration 和UpdateDa ...

  6. 基于Simple Image Statistics（简单图像统计,SIS)的图像二值化算法。

    这是个简单的算法,是全局二值算法的一种,算法执行速度快. 算法过程简单描述如下: 对于每一个像素,做如下处理 1.计算当前像素水平和垂直方向的梯度. (two gradients are calcul ...

  7. Android(Linux)线路规程的使用

        一般来说,车载导航主机都需要外接若干个UART的外设,如支持HFP的蓝牙模块.与原车通信的CAN解码盒模块.u-blox的GPS模块和DVD机芯等.早年使用Telechips TCC8902+ ...

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

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

  9. bzoj 3163: [Heoi2013]Eden的新背包问题

    Description "寄没有地址的信,这样的情绪有种距离,你放着谁的歌曲,是怎样的心心静,能不能说给我听."失忆的Eden总想努力地回忆起过去,然而总是只能清晰地记得那种思念的 ...

  10. javascript马赛克遮罩图片切换效果:XMosaic.js(转)

    新鲜出炉的javascript图片切换特效,实现的是马赛克遮罩切换.在flash里,好实现遮罩动画很简单,不过JS实现起来就有些困难了. XMosaic.js,与XScroll.js和XScroll2 ...