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

  • 相关阅读:
    JavaScript数组升降序排列、最大值、最小值等
    css3箭头
    隐藏显示
    最后一个 last-of-type
    jquery函数封装
    为什么要使用rem
    Git的使用--如何将本地项目上传到Github
    jQuery判断是否选中
    数组索引赋值
    HTML中input和button设置同样高度却不能等高的原因
  • 原文地址:https://www.cnblogs.com/lydialee/p/4037637.html
Copyright © 2020-2023  润新知