项目中遇到一个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. Oracle11g的最佳灵活体系结构OFA

  2. Ubuntu搭建Note.Js 平台

    1. 安装nodeJs和npm apt-get install nodejsapt-get install npm 2 .node有一个模块叫n,是专门用来管理node.js的版本的.首先安装n模块: ...

  3. 深入理解Thread.sleep的含义

    转载一篇对sleep说的非常好的一篇文章,原文http://www.cnblogs.com/ILove/archive/2008/04/07/1140419.html 我们可能经常会用到 Thread ...

  4. ubuntu 14.04 ns2.35 ***buffer overflow detected **: ns terminated解决办法

    1.按照如下教程安装 Install With Me !: How to Install NS-2.35 in Ubuntu-13.10 / 14.04 (in 4 easy steps) 2.运行一 ...

  5. C语言实现线程池

    以前写过一篇关于如何使用多线程推升推送速度(http://www.cnblogs.com/bai-jimmy/p/5177433.html),能够到达5000qps,其实已经可以满足现在的业务,不过在 ...

  6. Python-18-Django 基础篇

    1. Web 框架介绍 具体介绍Django之前,必须先介绍WEB框架等概念. Web框架:通俗地讲,就是别人已经设定好的一个web网站模板,你学习它的规则,然后「填空」或「修改」成你自己需要的样子. ...

  7. 熟悉MyEclipse

    资源网址:http://www.myeclipsecn.com/learningcenter/ 20151126 [从这里开始]量身打造自己的MyEclipse(多图) 主要讲在MyEclipse里面 ...

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

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

  9. JS获取回车事件（兼容各浏览器）

    一.用到onkeydown获取事件动作, 二.用到键盘对应代码keyCode, 三. var event=arguments.callee.caller.arguments[0]||window.ev ...

  10. Web 开发中很实用的10个效果

    在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成知识整理的习惯是很有必要的.这篇文章给大家推荐10个在 Web 开发中很有用的效果,记 ...