定时刷新页面SetInterval 和setTimeout -时间间隔能够动态设定

时间 2019-11-19

标签定时刷新页面 setinterval settimeout 时间间隔能够动态设定繁體版

原文原文链接

JS里设定延时：ajax

使用SetInterval和设定延时函数setTimeout 很相似。setTimeout 运用在延迟一段时间，再进行某项操做。异步

setTimeout("function",time) 设置一个超时对象　　 setInterval("function",time) 设置一个超时对象jsp

SetInterval为自动重复，　　　　　　　　　　　　 setTimeout不会重复。函数

clearTimeout(对象) 清除已设置的setTimeout对象　clearInterval(对象) 清除已设置的setInterval对象工具

举例一、：放到js代码中，页面加载完就设定了，时间到就刷新整个页面，缺点是没法动态更改刷新间隔。ui

function myrefresh() { window.location.reload(); } 
setTimeout('myrefresh()',5000); //指定5秒刷新一次

　　方法2、：<head><meta http-equiv="refresh" content="60"></head> spa

====为了实现能够更改动态修改刷新间隔【上面的方法是作不到的】code

分析：由于本页面是用jsp 方式，没有用到异步刷新填充数据，目前颇有局限性。orm

改造：方法一、不要刷新整个页面，定时触发ajax请求数据回来动态建立表格填充数据；对象

　　方法二、用iframe的方式，弄成多页面的感受，js 定时刷新 iframe里面的页面

方法三、仍是采用目前方式，变通一下。动态参数经过请求地址参数传递。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
}

其实不断刷新页面是很很差的，最好异步请求数据填充。后续改善，待更新.....