定时器解决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函数传递参数时,第一个参数尽量是函数而不是字符串,这是为了避免双重求值的问题,影响性能。

原文地址:https://www.cnblogs.com/lydialee/p/4037637.html