zoukankan      html  css  js  c++  java
  • 从setTimeout到浏览器线程机制 ,实现JS线程和UI同时执行的效果

    遇到一个问题情况:

    ocx读取多条记录的结果集。

    在js里用 for遍历。

    for(var i= 0;i<length;i++){

         $.ajax({

           后台返回结果

           处理成功,

           调用更新进度条的方法。

         })

    }

    发现,总是当for全部遍历完成,才去渲染进度条控件。更改样式。

    查阅N多资料更改后,

    将for改为递归调用,没执行一次,渲染一次进度条,后面的JS代码放在setTimeout(function,0),这时浏览器会优先渲染UI界面,然后在执行后面的JS代码,就实现了进度条实时更新了。

     

    //更新进度条的数据
    run(size,a+1);
    if(a<size-1){
    ++a;
    //让JS线程等待100,等待会让UI渲染进程实现
    setTimeout(submitData,10);
    //submitData();
    }else{
    size = 0;
    a= 0;
    return ;
    }

    解决问题知识点:从setTimeout到浏览器线程机制 

    我们知道浏览器内部至少会有这么两个线程:解析js的线程和渲染界面的线程。这里我们暂且称它们为JS线程和UI线程。

    由于js是可操纵DOM的,如果在修改这些元素属性同时渲染界面(即JS线程和UI线程同时运行),那么渲染线程前后获得的元素数据就可能不一致了。因此为了防止渲染出现不可预期的结果,浏览器控制JS线程和UI线程以列队的形式同步执行。

    setTimeout执行时会新开一个定时器线程,这是正好处于JS线程运行当中,当JS线程执行完成后,发现setTimeout马上就要开始执行(即时间小于上述的临界值),为了避免UI线程运行时间太长而带来的setTimeout严重拖时的不好体验,浏览器选择一直等待直到setTimeout到期,然后运行里面的js。如果发现setTimeout还要隔较长时间才到期,为了避免时间上的浪费,浏览器选择马上切换到UI线程。 

    结论:setTimeout 可用于处理耗时的js代码,但千万要小心第二个参数不要设置太小了,否则你看到的同样是一个空白页面。推荐在100ms左右,可满足所有浏览器。当然,如果可以不兼容IE的话,抛弃setTimeout吧,web workers 会是个很好的选择。

  • 相关阅读:
    Treap 树堆 容易实现的平衡树
    (转)Maven实战(二)构建简单Maven项目
    (转)Maven实战(一)安装与配置
    根据请求头跳转判断Android&iOS
    (转)苹果消息推送服务器 php 证书生成
    (转)How to renew your Apple Push Notification Push SSL Certificate
    (转)How to build an Apple Push Notification provider server (tutorial)
    (转)pem, cer, p12 and the pains of iOS Push Notifications encryption
    (转)Apple Push Notification Services in iOS 6 Tutorial: Part 2/2
    (转)Apple Push Notification Services in iOS 6 Tutorial: Part 1/2
  • 原文地址:https://www.cnblogs.com/liuliang-wifi/p/5431726.html
Copyright © 2011-2022 走看看