layui多iframe頁面控制定時器運(yùn)行的方法
更新時間：2019年09月05日 10:55:42 作者：從心歸零
今天小編就為大家分享一篇layui多iframe頁面控制定時器運(yùn)行的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
我們web頁面中有幾個頁面是有定時器在刷新的，并且查詢的內(nèi)容還不少，給服務(wù)器造成了不少壓力。這些接口已經(jīng)盡量優(yōu)化，能放到緩存的都放到緩存。然后主管又提了一個需求，就是我們使用的是layui多標(biāo)簽iframe框架，當(dāng)不在某個頁面的iframe時不要執(zhí)行定時器。我覺得這是一個挺不錯的提議，而且實(shí)現(xiàn)起來也不難。
粗略地考慮有兩個思路，一個是點(diǎn)擊標(biāo)簽時開啟或關(guān)閉定時器，一個是定時器執(zhí)行時判斷所在的iframe是否隱藏，如果隱藏則不執(zhí)行定時器的方法。第一種維護(hù)麻煩，難免有錯漏的情況，而且和別的iframe有聯(lián)系，不好。第二種邏輯判斷簡單，只和定時器所在iframe有關(guān)，雖然定時器一直在跑，不過只要里面的邏輯不執(zhí)行就行，重要的是減少給服務(wù)器的壓力。
那么怎么判斷定時器所在頁面是否隱藏呢？
獲取iframe所在元素的父元素，判斷是否有l(wèi)ayui-show類就好了。
function myInterval(func, time){
console.log("啟動定時器",func,time);
//點(diǎn)擊iframe對應(yīng)的標(biāo)簽則直接執(zhí)行定時器方法。不過注意，這里我默認(rèn)只執(zhí)行最后一個定時器方法，如果有多個定時器請自行更改。
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定時器調(diào)用");
if($(self.frameElement.parentElement).hasClass("layui-show")){
//判斷所在的頁面是否顯示
console.log(func,"方法調(diào)用");
console.log("定時器間隔"+time);
func.call();
}
}, time);
}
以上這篇layui多iframe頁面控制定時器運(yùn)行的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Js+Jq獲取URL參數(shù)的集中方法,需要的朋友可以參考下2014-05-05
這篇文章主要介紹了Javascript字符串瀏覽器兼容問題,實(shí)例形式對比分析了不兼容字符串與兼容字符串的區(qū)別,是非常實(shí)用的技巧,需要的朋友可以參考下2014-12-12
微信小程序數(shù)據(jù)統(tǒng)計,現(xiàn)在有很多的統(tǒng)計方法和統(tǒng)計工具,下面這篇文章主要給大家介紹了關(guān)于小程序統(tǒng)計來源信息的方案與具體代碼,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
JavaScript控制各種瀏覽器全屏模式的方法、屬性和事件介紹
瀏覽器全屏模式的啟動函數(shù)requestFullscreen仍然需要附帶各瀏覽器的js方言前綴，相信下面這段代碼需要你花大量的搜索才能湊齊：2014-04-04
這篇文章主要為大家詳細(xì)介紹了p5.js繪制旋轉(zhuǎn)的正方形，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
微信小程序?qū)崿F(xiàn)列表滾動頭部吸頂?shù)氖纠a
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)列表滾動頭部吸頂?shù)氖纠a，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章主要介紹了javascript簡單比較日期大小的方法,涉及JavaScript針對日期的轉(zhuǎn)換與判定操作技巧,需要的朋友可以參考下2016-01-01
這篇文章給大家詳細(xì)介紹了JavaScript中的并行處理，一直以來，JavaScript 都并沒有多線程的能力，而單線程在讓開發(fā)者方便的同時，也使它一直不能處理計算量復(fù)雜的場景，唯一方法就是讓服務(wù)端去做。下來通過這篇文章我們一起來看看詳細(xì)介紹。2016-09-09
這篇文章主要介紹了微信小程序系列之自定義頂部導(dǎo)航功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
文本框輸入數(shù)據(jù)后使用回車進(jìn)行提交，想必大家都嘗試過吧，在本文有個不錯的示例，喜歡的朋友可以參下2013-09-09