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

 

 其實不斷刷新頁面是很不好的,最好異步請求數據 填充。 后續改善,待更新.....

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM