项目中遇到一个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. Azure机器学习入门（一）

    我们开始深入学习Azure机器学习的基本原理并为您开启伟大的数据科学之门.Azure 机器学习的一个重要特征就是在构建预测分析方案时,它能够方便地将开发模式集成为可重复的工作流模式.这就使得Azure ...

  2. 关于C语言的问卷调查

    你对自己的未来有什么规划?做了哪些准备? 答:游戏开发,参与一些游戏的测试,通过自身的游戏体验和其他人的游戏体验来总结什么样的游戏会让人眼前一亮,爱不释手. 你认为什么是学习?学习有什么用?现在学习动 ...

  3. 第一次打开Lightroom时的基本设置

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/5 ...

  4. Jsp 错题分析

    ArrayList删除元素通过RemoveAt(int index)来删除指定索引值的元素 运行时异常都是RuntimeException类及其子类异常,如NullPointerException.I ...

  5. Struts2 OGNL案例

    一>>原始类型与包装类型 先定义两个实体类User和Address User package cn.entity; public class User { private String n ...

  6. ListIterator接口，双向输出。

    1,ListIterator接口与Itreator接口的区别. 2,使用限制. 定义如下: public interface ListIterator<E>extends Iterator ...

  7. ZeroClipboard跨浏览器复制粘贴

    <!DOCTYPE html> <html> <head> <title>ZeroClipboard跨浏览器复制粘贴</title> < ...

  8. vuejs mvvm图解

  9. .jshintrc配置

    在root目录创建一个.jshintrc文件插入下面的代码即可.也可以自行配置. { // // 强制选项 // // When set to true, these options will mak ...

  10. JavaScript中两种类型的全局对象/函数

    这里所说的JavaScript指浏览器环境中的包括宿主环境在内的. 第一种是ECMAScript Global Object,第二种是宿主环境(Host)下的全局对象/函数. 一.核心JavaScri ...