昨天在做开发时,遇到这样一个问题,当页面刚加载的时候,就要获取document的高度,可是此时页面上所有的ajax请求的数据都还没有渲染到页面上,所以导致得到的document的高度仅仅是页面结构的高度,而不是想要的结果,对于与这个问题,我琢磨了好久,怎么才能在ajax数据渲染完成之后获取到document的高度呢?我想过很多办法,但是都有弊端,比如:

  1、设置延时器:让页面刚进来一段时间之后再获取document的高度,可是考虑到网速有好有坏,如果网速差的用户在获取高度的时候,数据还没有请求完成,那不也是百搭吗,所也不可取;

  2、设置定时器:让页面刚加载的时候就一直获取document的高度,并且拿到值之后,一直用,这样虽然能解决网速差的问题,可是在移动端,如果一直这样的话,那么用户长时间在这个网页上时,那么流量就耗费的不要不要的,对于注重用户体验的我们,这种方法也不可取;

  3、变量累加:在全局定义一个变量,在每个ajax请求成功之后,让这个变量累加,当变量的值跟ajax的个数一致的时候,再获取document的高度,这样看似乎是好的,可是对于有的项目ajax是后端返回来的一个方法,前端直接调用就可以,而且ajax属于异步加载,在complete事件里边根本就没法操作,所以也不可取;

  那该怎么办呢,头疼+郁闷~~~

  然后在网上一直找答案,也没有找到合适的方法,最终,朋友给我说有一个全局的ajax事件,于是我就研究了一番,便利用这个方法解决了问题。

  在此方法中,ajax分为六个阶段,分别是ajaxStart、ajaxSend、ajaxSucceed、ajaxError、ajaxComplete和ajaxStop。

  在我看来,利用下边的几张图,应该很能说明这个方法:

  

  很明显,在ajax中,每个ajax都会经历这六个阶段,但是唯独要注意的是,当几个ajax同时或者连续发送请求时(前边的ajax请求没有结束,就发送了另外的ajax),那么ajaxStart和ajaxStop只会出现一次,即第一个ajax提供ajaxStart,最后一个ajax提供ajaxStop。

  当这个问题解决之后,突然感觉心里豁然开朗,所以将这个方法写在这里,希望能与大家一起分享。

  后来又发现了几个关于ajax全局事件的博客,地址:https://www.cnblogs.com/by-dxm/p/6393288.html    、 http://www.cnblogs.com/RachelChen/p/5433881.html

  

关于数据未渲染完,要获取document高度问题——ajax全局事件的更多相关文章

  1. vue中在页面渲染完之后获取元素(否则动态渲染的元素获取不到)

    两种方法: 方法一: 使用$nextTick,在异步获得数据之后再获取元素: 方法二: 在then之后再获取该元素: 问题2:vue中监听改变数组的方法: let idx =; this.listIn ...

  2. Vue数据产生变化需要页面渲染完之后执行某操作

    1.数据产生变化或者页面需要vue数据渲染完之后加载的东西 Vue.nextTick(function () { alert(123); }); 2 调用vue方法 --------------Vue ...

  3. vue music-抓取歌单列表数据(渲染轮播图)

    下载安装新依赖 babel-runtime:对es6语法进行转译 fastclick:对移动端进行点击300毫秒延迟 ,,取消掉 babel-polyfill:API 先添加,在npm install ...

  4. 与安卓联调,调用安卓那边的方法,获取到安卓传过来的数据,再携带这些数据发送axios请求,获取到用户的信息

    第一步:js调用Android方法:接收Android传递过来的数据,并做处理 //参数一:调用java中的方法   submitFromWeb是方法名,必须和Android中注册时候的方法名称保持一 ...

  5. vue数据已渲染成 但还是报错 变量 undefined

    问题:页面上的数据已渲染出来,但是控制台还是报错变量未undefined,主要是当页面加载完成后,数据并未加载完,所以会报次错误. 解决办法:在数据渲染的主节点(最外层的div)添加 v-if=“da ...

  6. 基于JS正则实现模板数据动态渲染

    最近业务上需要动态渲染模板数据: 一.业务需求: 1.前端后端定义好模板以及变量名,根据打印机类型转换成对应sdk需要的标签模板,保存数据库 2.订单数据是前端根据支付结果获取的,最终渲染完的数据模板 ...

  7. Oracle session inactive状态临时表数据未清空问题

    问题描述:Oracle数据库,java代码使用某数据库实例,获取connection并在使用结束关闭,而session未销毁,而是状态变为inactive从而导致临时表数据未清空. Oracle临时表 ...

  8. flock防止crontab脚本周期内未执行完重复执行(转)

    如果某脚本要运行30分钟,可以在Crontab里把脚本间隔设为至少一小时来避免冲突.而比较糟的情况是可能该脚本在执行周期内没有完成,接着第二个脚本又开始运行了.如何确保只有一个脚本实例运行呢?一个好用 ...

  9. angularjs -- 监听angularJs列表数据是否渲染完毕

    前端在做数据渲染的时候经常会遇到在数据渲染完毕后执行某些操作,这几天就一直遇到在列表和表格渲染完毕后,执行点击和选择操作.对于angularjs处理这类问题,最好的方式就是指令 directive. ...

随机推荐

  1. SQLServer 事务的隔离级别

    SQLServer事务的隔离级别 数据库是要被广大客户所共享访问的,那么在数据库操作过程中很可能出现以下几种不确定情况. 更新丢失(Lost update) 两个事务都同时更新一行数据,但是第二个事务 ...

  2. IIS网站调用FFMPEG执行截图命令失败的原因(暂时记录)

    之前有个功能是用户上传视频后,网站对其进行截图处理.功能采用FFMPEG操作,在本机新建一个小程序进行调试时是没有问题的. 可功能原封不动挪到项目里,截图竟然失败了,于是开始排查. 期初以为是参数设置 ...

  3. 基于ACE的TAO开发---一个简单的入门实例-----VS2008(一)

    万事开头难,不管做什么事最开始总是最困难的,一旦上手了就好了. 这也是我自己学习corba编程的一点经验和心得.下面的例子主要是保证读者跟着走能立马看到效果. 1.机器上的TAO是实现已经装好的开发版 ...

  4. vue2 阻止时间冒泡

    click.stop.prevent <div class="content-right" @click.stop.prevent="pay" > ...

  5. Vtk读取并显示保存图像

    (1):Vtk读取并显示图像:三种方法 转载:未知出处 转载:用VTK显示平面图片:http://blog.csdn.net/tonylk/article/details/464881 用到vtkJP ...

  6. uva 1658 Admiral 【 最小费用最大流 】

    拆点,每个点拆成 i,i' 在i 和i‘之间连一条费用为0,容量为1的边,就可以保证每个点只经过一次 特殊的点,1和n之间,,,n和2*n之间连一条费用为0,容量为2的边,可以求出两条路径 #incl ...

  7. JavaScript是按引用传递or值传递?

    今遇js基础类型等问题,已经有点模糊,遂作总结. 前言: JavaScript原始类型:Undefined.Null.Boolean.Number.String.Symbol JavaScript引用 ...

  8. trigger事件就是继承某一个类的事件.

    <html><head><script type="text/javascript" src="/jquery/jquery.js" ...

  9. C++基础 (7) 第七天 多态的原理 纯虚函数和抽象类 依赖倒置原则

    1 昨日回顾 2 多态的原理 1 要有继承 2 要有子类重写父类的虚函数 3 父类指针(或者引用)指向子类对象 (动态联编 虚函数表 3 证明vptr指针的存在 4 vptr指针在构造父类的时候是分步 ...

  10. 2、链接数据库+mongodb基础命令行+小demo

    链接数据库并且打印出数据的流程:1.在CMD里面输入 mongod 2.在CMD里面输入 mongo 3.在输入mongodb命令行里面进行操作,首先输入 show dbs 来查看是否能够链接得上库4 ...