Ajax实现页面自动刷新实例解析

5 篇文章 0 订阅

https://www.jb51.net/article/83169.htm

1.我们在网上搜搜会发现有很多定时刷新页面的方法,最简单的就是在<head></head>标记之间加上如下代码:

在<head></head>标记之间加上代码,实现定时刷新,此代码我已经测试过,可以实现效果

<meta http-equiv="refresh" content="5" URL="Example.aspx" />

说明:content的值代表页面刷新的间隔时间,以秒为单位

2.ajax局部刷新一个地方

function refreshOnTime(){
    $.ajax({
    //配置
    });
    //7秒后重复执行该函数
    setInterval('refreshOnTime', 7000);
}
 
//开始执行自己
refreshOnTime();
 
//这样写的话,就会无限的重复执行自己,每次执行完后延迟自定义秒再次执行自己,且互不干扰

3、例如:刚开始是加载所有的数据(三个区域是不同的方法读取数据,刷新的时间分别是5,6,7s)

第5秒应该是刷新第一个区域

第6秒应该是刷新第二个区域

第7秒应该是刷新第三个区域

//加载区域1
function refreshArea1(){
    $.ajax({
    //配置
    });
}
//加载区域2
function refreshArea2(){
    $.ajax({
    //配置
    });
}
//加载区域3
function refreshArea3(){
    $.ajax({
    //配置
    });
}
//定时刷新
function refreshOnTime(){
    //首先刷新区域1
    refreshArea1();
    //在区域1刷新之后的1秒后加载区域2
    setInterval('refreshArea2', 1000);
    //在区域2刷新之后的1秒后加载区域3
    setInterval('refreshArea3', 1000);
    //在自定义秒后重复该函数
    setInterval('refreshOnTime', 5000);
}
//首先加载所有区域
refreshArea1();
refreshArea2();
refreshArea3();
//设置的延迟时间是5,则执行顺序为,开始的第5秒,执行1,延迟1秒,即第6秒执行2,再延迟1秒,即第7秒执行3。
//每间隔5秒重复一次,重复时,2始终比1慢1秒,3始终比2慢1秒
refreshOnTime();

 

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

香煎三文鱼

你的鼓励将是我创作的最大动力!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值