定时器解决js长时间运行脚本问题

 

---

一般地，单个js操作的运行时间不应超过100毫秒，否则的话，会影响用户体验，用户会认为自己与界面失去联系。而对于一些复杂的任务，可能无法在100ms内完成，甚至会突破浏览器限制（调用栈大小限制和长时间运行限制）。其中，长时间运行限制的衡量有执行语句的数量和执行语句的时间。 
因此，针对复杂任务，要想不影响用户体验，就需要借助定时器。 
使用定时器可以让出UI线程的控制权，停止执行javascript，使得UI线程有机会更新，然后隔一段时间后在执行javascript代码。

 

1. function clickFun(){
2. ......
3. setTimeout(fun,50); //在setTimeout（）调用时刻为t1，经过50ms后，即在t1+50时，定时器代码的javascript任务会被加入UI队列，但不一定立即执行。
4. otherOperate();
5. }

如果，otherOperate函数的执行时间超过50ms，则定时器代码会在click事件完成前被加入UI队列，在otherOperate函数执行完成后，立即调用定时器里的代码，甚至察觉不出延迟。 
注：定时器代码只有在创建它的函数执行完成后，才有可能被执行 
而且，定时器代码会重置浏览器所有相关的设置，包括长时间运行脚本定时器，调用栈的大小。所以，这一特性使得定时器成为长时间运行js代码的理想解决方案。

另外：给setTimeout、setInterval函数传递参数时，第一个参数尽量是函数而不是字符串，这是为了避免双重求值的问题，影响性能。