文档章节

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

itazi
 itazi
发布于 2016/09/17 23:52
字数 715
阅读 41
收藏 0

     首先说一下当时我想使用的场景,我的一个页面有四块内容是通过调用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都去判断,其次,提高了代码的可维护性以及可读性。

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

© 著作权归作者所有

itazi
粉丝 0
博文 7
码字总数 5566
作品 0
福州
私信 提问
在webview宿主容器中使用HTML5调用本地能力

这次跟大家分享一下移动应用开发中,在webview宿主容器中使用HTML5调用本地能力需要注意的一些事情。 这里提到的宿主容器是指类似于ExMobi、PhoneGap这样的app框架,宿主容器除了提供基本的H...

nandy007
2015/05/12
1K
0
javascript中的setInterval()和setTimeout()用法比较

setTimeout()和setInterval() 何时被调用执行 定义 setTimeout()和setInterval()经常被用来处理延时和定时任务。setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,而setInterval...

sunshinewyf
2015/07/25
102
0
JavaScript 工作线程实现方式

随着 Ajax 应用的流行,浏览器所承担的职责也越来越多。一些原来由服务器端执行的计算操作也被迁移到浏览器端来执行。通过 JavaScript 工作线程,可以在不影响页面本身运行的情况下,在后台运...

IBMdW
2011/05/27
335
0
javascript引擎执行的过程的理解--执行阶段

一、概述 js引擎执行过程主要分为三个阶段,分别是语法分析,预编译和执行阶段,上篇文章我们介绍了语法分析和预编译阶段,那么我们先做个简单概括,如下: 1、语法分析: 分别对加载完成的代...

saucxs
05/23
0
0
利用CSS、JavaScript及Ajax实现图片预加载的三大方法

摘要:图片的加载速度往往影响着网站整体的用户体验,尤其对于包含大量图片的网站。对图片进行预加载,不失为一个高效的解决方案。如何实现预加载?本文将例举利用CSS、JavaScript及Ajax实现...

spademan
2013/10/22
193
0

没有更多内容

加载失败,请刷新页面

加载更多

只需一步,在Spring Boot中统一Restful API返回值格式与统一处理异常

统一返回值 在前后端分离大行其道的今天,有一个统一的返回值格式不仅能使我们的接口看起来更漂亮,而且还可以使前端可以统一处理很多东西,避免很多问题的产生。 比较通用的返回值格式如下:...

晓月寒丶
今天
59
0
区块链应用到供应链上的好处和实际案例

区块链可以解决供应链中的很多问题,例如记录以及追踪产品。那么使用区块链应用到各产品供应链上到底有什么好处?猎头悬赏平台解优人才网小编给大家做个简单的分享: 使用区块链的最突出的优...

猎头悬赏平台
今天
27
0
全世界到底有多少软件开发人员?

埃文斯数据公司(Evans Data Corporation) 2019 最新的统计数据(原文)显示,2018 年全球共有 2300 万软件开发人员,预计到 2019 年底这个数字将达到 2640万,到 2023 年达到 2770万。 而来自...

红薯
今天
63
0
Go 语言基础—— 通道(channel)

通过通信来共享内存(Java是通过共享内存来通信的) 定义 func service() string {time.Sleep(time.Millisecond * 50)return "Done"}func AsyncService() chan string {retCh := mak......

刘一草
今天
58
0
Apache Flink 零基础入门(一):基础概念解析

Apache Flink 的定义、架构及原理 Apache Flink 是一个分布式大数据处理引擎,可对有限数据流和无限数据流进行有状态或无状态的计算,能够部署在各种集群环境,对各种规模大小的数据进行快速...

Vincent-Duan
今天
59
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部