定時刷新頁面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
}