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