layui多iframe页面控制定时器运行的方法
更新时间：2019年09月05日 10:55:42 作者：从心归零
今天小编就为大家分享一篇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);
}
以上这篇layui多iframe页面控制定时器运行的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了扩展Bootstrap Tooltip插件使其可交互的方法,结合实例形式分析了bootstrap扩展tooltip插件的原理与具体操作技巧,需要的朋友可以参考下2016-11-11
学习js就不得不学他的数组，这篇文章是由色拉油整理下，需要学习js数组的朋友可以参考下2013-10-10
本文通过实例代码给大家介绍了javascript中关于正则表达式的巧妙操作技巧，非常不错，具有参考借鉴价值，需要的的朋友参考下吧2017-08-08
下面小编就为大家带来一篇使用递归遍历对象获得value值的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
这篇文章主要为大家详细介绍了如何利用JavaScript实现检测用户是否在线功能，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下2022-12-12
这篇文章主要介绍了js简单正则验证汉字英文及下划线的方法,结合完整实例形式分析了javascript针对中英文字母与下划线的正则验证方法,需要的朋友可以参考下2016-11-11
本篇文章主要介绍了Dropify.js图片宽高自适应的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了js显示世界时间的方法,可现实世界各大城市的当前时间,涉及JavaScript针对时间的获取与运算操作技巧,需要的朋友可以参考下2016-04-04
这篇文章主要介绍了在JavaScript中call()与apply()区别 的相关资料,需要的朋友可以参考下2016-01-01
这篇文章主要为大家详细介绍了微信小程序实现计算器小功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-07-07
最新评论