layui多iframe頁面控制定時器運行

我們web頁面中有幾個頁面是有定時器在刷新的,並且查詢的內容還不少,給服務器造成了不少壓力。這些接口已經儘量優化,能放到緩存的都放到緩存。然後主管又提了一個需求,就是我們使用的是layui多標籤iframe框架,當不在某個頁面的iframe時不要執行定時器。我覺得這是一個挺不錯的提議,而且實現起來也不難。

粗略地考慮有兩個思路,一個是點擊標籤時開啓或關閉定時器,一個是定時器執行時判斷所在的iframe是否隱藏,如果隱藏則不執行定時器的方法。第一種維護麻煩,難免有錯漏的情況,而且和別的iframe有聯繫,不好。第二種邏輯判斷簡單,只和定時器所在iframe有關,雖然定時器一直在跑,不過只要裏面的邏輯不執行就行,重要的是減少給服務器的壓力。

那麼怎麼判斷定時器所在頁面是否隱藏呢?

獲取iframe所在元素的父元素,判斷是否有layui-show類就好了。

function myInterval(func, time){
	console.log("啓動定時器",func,time);
    //點擊iframe對應的標籤則直接執行定時器方法。不過注意,這裏我默認只執行最後一個定時器方法,如果有多個定時器請自行更改。
	top.$("li[lay-id='"+$(self.frameElement).attr("src")+"']").unbind('click').click(function(){
		console.log(func,"方法調用");
		func.call();
	});
	return setInterval(function(){
		console.log("myInterval定時器調用");
		if($(self.frameElement.parentElement).hasClass("layui-show")){
            //判斷所在的頁面是否顯示
			console.log(func,"方法調用");
			console.log("定時器間隔"+time);
			func.call();
		}
	}, time);
}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章