javascript使用定时器判断页面的几个ajax是否加载完毕

     首先说一下当时我想使用的场景，我的一个页面有四块内容是通过调用ajax读取后台数据然后返回页面拼接而成，每块内容是10条数据，形成类似一个列表，但是我要有滚动效果。这个滚动效果是统一加上去的，所以我要等每个ajax的内容都加载完毕之后再去执行添加滚动效果的操作。但是ajax返回结果的顺序并不是确定的，也就是说放在最后的ajax不一定最后一个加载完内容，于是我就想到第一种最简单的实现方法。（以下使用类似伪代码形式，这样比较简洁）
 

    var isComplete = 0;//定义全局变量，用于统计ajax执行的次数.

    $.ajax({

        .....//此处省略请求过程以及参数.

        success : function (){//如果成功返回内容

        isComplete++;

        if(isComplete == 4){//如果等于四次，说明四个ajax的内容全部加载完成，就可以添加滚动操作了。

        //添加滚动操作

        }
    });

     于是这样的判断我就得每次都在ajax的成功函数里面添加关于isComplete的判断。这样写最后还是成功了，但是耦合度高，后来我要写另外一个页面有6个模块，那要等6个模块内容加载完成，我发现得这样判断6次。这我可不干了，我一向比较喜欢省力的事。于是我就在这些包含ajax的函数的最外写了了一个定时器用户判断是否全部加载完成，然后再去执行后续操作。

 var isComplete = 0;//定义全局变量，用于统计ajax执行的次数.
//定时器函数

function countIsComplete(){
    if(isComplete == 4){//如果次数等于ajax的个数，说明全部加载完成
      //添加滚动操作
    }else{
      setTimeout(countIsComplete,100);//定时操作，100ms之后再执行这个函数.
    }
}   

setTimeout(countIsComplete,100);



//原先的ajax改成只有isComplete++就可以了。
    $.ajax({

        .....//此处省略请求过程以及参数.

        success : function (){//如果成功返回内容

        isComplete++;//后面就无需再去判断了。
      
    });

    这样显然，首先减少了代码量，不用每块ajax都去判断，其次，提高了代码的可维护性以及可读性。

    总结，其实在写这种代码的时候，我们就可以考虑以前学习的模式的使用，比如观察者模式，我觉得由浅到深，逐渐学会使用这些经典模式，对我们的锻炼有很大的帮助。其实这是我第一次写博客，感觉这种东西就是我把自己近段时间的经验总结出来，然后跟大家一起分享，从而学到更多。

转载于:https://my.oschina.net/itazi/blog/747777