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

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

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

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

说明：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();

原文链接：https://blog.csdn.net/qq_39569480/article/details/102892553