layui多iframe頁面控制定時(shí)器運(yùn)行的方法
我們web頁面中有幾個(gè)頁面是有定時(shí)器在刷新的，并且查詢的內(nèi)容還不少，給服務(wù)器造成了不少壓力。這些接口已經(jīng)盡量優(yōu)化，能放到緩存的都放到緩存。然后主管又提了一個(gè)需求，就是我們使用的是layui多標(biāo)簽iframe框架，當(dāng)不在某個(gè)頁面的iframe時(shí)不要執(zhí)行定時(shí)器。我覺得這是一個(gè)挺不錯(cuò)的提議，而且實(shí)現(xiàn)起來也不難。
粗略地考慮有兩個(gè)思路，一個(gè)是點(diǎn)擊標(biāo)簽時(shí)開啟或關(guān)閉定時(shí)器，一個(gè)是定時(shí)器執(zhí)行時(shí)判斷所在的iframe是否隱藏，如果隱藏則不執(zhí)行定時(shí)器的方法。第一種維護(hù)麻煩，難免有錯(cuò)漏的情況，而且和別的iframe有聯(lián)系，不好。第二種邏輯判斷簡單，只和定時(shí)器所在iframe有關(guān)，雖然定時(shí)器一直在跑，不過只要里面的邏輯不執(zhí)行就行，重要的是減少給服務(wù)器的壓力。
那么怎么判斷定時(shí)器所在頁面是否隱藏呢？
獲取iframe所在元素的父元素，判斷是否有l(wèi)ayui-show類就好了。
function myInterval(func, time){
console.log("啟動(dòng)定時(shí)器",func,time);
//點(diǎn)擊iframe對應(yīng)的標(biāo)簽則直接執(zhí)行定時(shí)器方法。不過注意，這里我默認(rèn)只執(zhí)行最后一個(gè)定時(shí)器方法，如果有多個(gè)定時(shí)器請自行更改。
top.$("li[lay-id='"+$(self.frameElement).attr("src")+"']").unbind('click').click(function(){
console.log(func,"方法調(diào)用");
func.call();
});
return setInterval(function(){
console.log("myInterval定時(shí)器調(diào)用");
if($(self.frameElement.parentElement).hasClass("layui-show")){
//判斷所在的頁面是否顯示
console.log(func,"方法調(diào)用");
console.log("定時(shí)器間隔"+time);
func.call();
}
}, time);
}
以上這篇layui多iframe頁面控制定時(shí)器運(yùn)行的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
擴(kuò)展Bootstrap Tooltip插件使其可交互的方法
這篇文章主要介紹了擴(kuò)展Bootstrap Tooltip插件使其可交互的方法,結(jié)合實(shí)例形式分析了bootstrap擴(kuò)展tooltip插件的原理與具體操作技巧,需要的朋友可以參考下2016-11-11
學(xué)習(xí)js就不得不學(xué)他的數(shù)組，這篇文章是由色拉油整理下，需要學(xué)習(xí)js數(shù)組的朋友可以參考下2013-10-10
本文通過實(shí)例代碼給大家介紹了javascript中關(guān)于正則表達(dá)式的巧妙操作技巧，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-08-08
使用遞歸遍歷對象獲得value值的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄褂眠f歸遍歷對象獲得value值的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
利用JavaScript實(shí)現(xiàn)檢測用戶是否在線功能
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)檢測用戶是否在線功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2022-12-12
這篇文章主要介紹了js簡單正則驗(yàn)證漢字英文及下劃線的方法,結(jié)合完整實(shí)例形式分析了javascript針對中英文字母與下劃線的正則驗(yàn)證方法,需要的朋友可以參考下2016-11-11
本篇文章主要介紹了Dropify.js圖片寬高自適應(yīng)的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了js顯示世界時(shí)間的方法,可現(xiàn)實(shí)世界各大城市的當(dāng)前時(shí)間,涉及JavaScript針對時(shí)間的獲取與運(yùn)算操作技巧,需要的朋友可以參考下2016-04-04
在JavaScript中call()與apply()區(qū)別
這篇文章主要介紹了在JavaScript中call()與apply()區(qū)別 的相關(guān)資料,需要的朋友可以參考下2016-01-01
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)計(jì)算器小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07