js阻塞ui进程涉及的知识点整理

项目进行中遇到了同步ajax阻塞ui线程阻塞的问题,原因是执行两个同步ajax请求为一次完整的方法,因业务需求需要循环执行这个方法,检查后台返回的数据正确,但是由于ajax请求时间过长,考虑增加遮罩层与loading图标,

这时遇到该问题,loading图标 .后面的出图也是所有方法执行后只出一个图

代码类似于这样:

$(function(){

    for(var key in data){//循环执行

       $('#mask').css('display','block');//遮罩层

       doAjax();

       $('#mask').css('display','none');//去除遮罩层　

    }

　　　

});

var doAjax = {

   aAjax:function(){//第一个ajax请求

      ajax({

          async:false

          url:url,

          success:function(){

              doAjax.bAjax();

          }

      });

    };

   bAjax : function(){//第二个ajax请求

        ajax({

            async:false

            url:url,

            success:function(){

               doAjax.doHightCharts();

           }

        });

     };

   doHighCharts:function(){

         //出图

    }

}

此时为每一个过程考虑两次js阻碍ui线程的加载,第一次添加遮罩层时,第二次为加载highcharts出图时.

考虑两次的原因均因为async:false的原因.由于浏览器的渲染(UI)与与js线程是互斥的,在执行js耗时操作时,页面渲染会被阻塞掉。当我们执行异步ajax的时候没有问题，但当设置为同步请求时，其他的动作（ajax函数后面的代码，还有渲染线程）都会停止下来。即使我的DOM操作语句是在发起请求的前一句($('#mask').css('display','block');//遮罩层)，这个同步请求也会“迅速”将UI线程阻塞，不给它执行的时间。这就是代码失效的原因。

在探究这个问题时,了解到更多的知识:(由于项目工期紧,没能使用各种方法实现)

jQuery的deferred对象

项目中的这个难题使用最简单易懂的方式:

setTimeout解决阻塞问题:

var flag = {

   num:0

}

$(function(){

    $('#mask').css('display','block');//遮罩层

   setTimeout{//首先执行一次

       doAjax(),0

    }

　

});

var doAjax = {

   aAjax:function(){//第一个ajax请求

      ajax({

          async:true,//可以异步

          url:url,

          success:function(){

              doAjax.bAjax();

          }

      });

    };

   bAjax : function(){//第二个ajax请求

        ajax({

            async:true,//可以异步

            url:url,

            success:function(){

                  flag.num++;//此时执行避免异步

                    if (flag.num < data.length) {

                        setTimeout(doAjax.aAjax(), 100);

                    }

                   doAjax.doHightCharts();

                   if(flag.num==data.length){

                      $('#mask').css('display','none');//去除遮罩层

                    }

           }

        });

     };

   doHighCharts:function(){

         //出图

    }

}

此时简单来说,setTimeout将方法排列的js执行队列的最后(哪怕设置第二个参数为0),所以说使用setTimeout是为了确保UI刷新线程不被阻塞.

理解此过程可以根据:

js单线程浅谈

js线程

在这里进行简单的总结:

巴特西

js阻塞ui进程涉及的知识点整理

最新文章

热门文章