alert阻塞线程，导致页面渲染未执行

       今天开发中遇到一个比较奇葩的问题，就是ajax异步执行后调之后，在页面的input里赋值回调的结果，后alert提示信息。发现了刷新后第一次好用，之后就不怎么好使了，后来研究了一下…有缘帮助各位脱坑...

原因：

      js是单线程执行，如果执行一些比较耗时的代码或者直接阻塞线程（alert），浏览器就没办法同时去渲染 GUI，——因为单线程，事实上交js引擎确实已经执行了alert之前的.val("xxx")的赋值语句，只不过还没有执行事件循环队列里的渲染页面的事件任务，主线程就被阻塞了。只有当主线程执行完当前执行栈中的所有任务，才就会去读取事件队列里的任务（先进先出），并执行任务。这里就有一个疑问，为啥js单线程还可以异步执行ajax，为啥不等GUI渲染后再执行alert，却直接执行下去了（非阻塞）。这就得益于上文提到的js的事件队列循环机制了。

      事件循环让 JavaScript 做到既是单线程，又绝对不会阻塞，是用来协调各种事件、用户交互、脚本执行、UI 渲染、网络请求等的一种机制。

     当然有想要深入了解js事件队列循环的童鞋可以自行百度了，有很全面的解释，这里来说说怎么处理吧。

 

方法一：

     js是单线程的，所以当我们完成对input赋值以后，可以紧接着取值，判断是否为空串，不为空的话再alert提示信息。

方法二：

      通过setTimeout 改变js和事件执行顺序机制，当完成对input赋值以后，可以先将主线程挂起，让js先去执行事件任务队列里的事件任务（先进先出），也就是在赋值之后刚刚放入事件队列中的页面渲染任务，等执行完了，再唤醒主线程继续执行alert提示信息即可。