定时刷新页面SetInterval 和setTimeout -时间间隔可以动态设定
JS里设定延时:
使用SetInterval和设定延时函数setTimeout 很类似。setTimeout 运用在延迟一段时间,再进行某项操作。
setTimeout("function",time) 设置一个超时对象 setInterval("function",time) 设置一个超时对象
SetInterval为自动重复, setTimeout不会重复。
clearTimeout(对象) 清除已设置的setTimeout对象 clearInterval(对象) 清除已设置的setInterval对象
举例 1、:放到js代码中,页面加载完就设定了,时间到就刷新整个页面,缺点是无法动态更改刷新间隔。
function myrefresh() { window.location.reload(); } setTimeout('myrefresh()',5000); //指定5秒刷新一次
方法二、 :<head><meta http-equiv="refresh" content="60"></head>
====为了实现可以更改动态修改刷新间隔【上面的方法是做不到的】
分析:因为本页面是用jsp 方式,没有用到异步刷新填充数据,目前很有局限性。
改造:方法1、不要刷新整个页面,定时触发ajax请求数据回来 动态创建表格填充数据;
方法2、用iframe的方式,弄成多页面的感觉,js 定时刷新 iframe里面的页面
方法3、还是采用目前方式,变通一下。动态参数通过请求地址参数 传递。js代码如下:
$(function() { //先定义一个静态方法getUrlParam(拓展工具)的方式 (function($) { $.getUrlParam = function(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null; } })(jQuery); var xx = $.getUrlParam('pn');//获取参数 大于0才设定,如果为0视为停止刷新 if (xx > 0) { setTimeout('myrefresh1(' + xx + ')', xx);//设定本次定时间隔 } }); function queryItems() { document.itemsForm.action = "${pageContext.request.contextPath }/coins/list.action"; document.itemsForm.submit(); } function myrefresh1(interval) { // window.location.reload();改用下方方法 self.location = 'list?pn=' + interval;//将时间间隔作为请求参数,controller中并不使用它 } var st; function StartReflesh() { var time = document.getElementById("selectTime").value;//js获取值 st = setInterval('myrefresh1(' + time + ')', time);//设定定时间隔,并把 间隔传参给地址 } function EndReflesh() { // clearInterval(st); self.location = 'list?pn=0';//停止刷新时参数 pn是为0 }
其实不断刷新页面是很不好的,最好异步请求数据 填充。 后续改善,待更新.....
分类:
jQuery
, 1JavaScript
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· winform 绘制太阳,地球,月球 运作规律
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具