itclancoder

V1

2022/09/08阅读:37主题:绿意

JS如何实现自动刷新页面

前言

在一些具有实效特点的网站,可视化数据实时大屏,比如:股票价格,外汇牌价,全国疫情实时数据统计等 定时地自动刷新网页,把最新的数据展示给用户,这样的效果在javaScript中如何实现呢 在JavaScript里有一个reload函数可以实现这样的效果

具体实现

// 自动刷新函数
function autoRefresh({
    window.location.reload(); // 调用location的reload函数
}
setTimeout(() => {
   autoRefresh();
},3000)                 // 3秒钟,自动刷新一次

难点剖析

实现这个效果,需要知道reload()函数的作用是让浏览器刷新当前网页,其次网页的自动刷新离不开一个定时器,也就是setTimeout()函数,这个函数 属于window对象,它也是顶层对象,所以直接写函数名称就能被调用,不需要写完整的window.setTimeout(),接收两个参数,第一个是回调函数,具体要执行的代码,第二个是间隔的时间,单位为毫秒,上面示例中是3秒执行一次

额外拓展

有一种最简单的方式就是直接用一行代码就可以实现,使用meta标签即可实现,还可以实现自动跳转到某个指定的网站上

<meta http-equiv="refresh" content="5;url=https://tv.itclan.cn/"

原文链接-JS实现自动刷新页面

分类:

前端

标签:

JavaScript

作者介绍

itclancoder
V1

微公号:itclanCoder