layui多iframe页面控制定时器运行的方法


Posted in Javascript onSeptember 05, 2019

我们web页面中有几个页面是有定时器在刷新的,并且查询的内容还不少,给服务器造成了不少压力。这些接口已经尽量优化,能放到缓存的都放到缓存。然后主管又提了一个需求,就是我们使用的是layui多标签iframe框架,当不在某个页面的iframe时不要执行定时器。我觉得这是一个挺不错的提议,而且实现起来也不难。

粗略地考虑有两个思路,一个是点击标签时开启或关闭定时器,一个是定时器执行时判断所在的iframe是否隐藏,如果隐藏则不执行定时器的方法。第一种维护麻烦,难免有错漏的情况,而且和别的iframe有联系,不好。第二种逻辑判断简单,只和定时器所在iframe有关,虽然定时器一直在跑,不过只要里面的逻辑不执行就行,重要的是减少给服务器的压力。

那么怎么判断定时器所在页面是否隐藏呢?

layui多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页面控制定时器运行的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery学习笔记之控制页面实现代码
Feb 27 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
Dec 05 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
Mar 05 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
Jan 26 Javascript
js实现的页面矩阵图形变换特效
Jan 26 Javascript
javascript回到顶部特效
Jul 30 Javascript
Bootstrap超大屏幕的实现代码
Mar 22 Javascript
微信小程序实现导航栏选项卡效果
Jun 19 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
Nov 08 Javascript
node.js使用stream模块实现自定义流示例
Feb 13 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
Jun 05 Javascript
js实现盒子移动动画效果
Aug 09 Javascript
解决layer.msg 不居中 ifram中的问题
Sep 05 #Javascript
JS中比Switch...Case更优雅的多条件判断写法
Sep 05 #Javascript
layer实现弹出层自动调节位置
Sep 05 #Javascript
vue使用i18n实现国际化的方法详解
Sep 05 #Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
Sep 05 #Javascript
一文看懂如何简单实现节流函数和防抖函数
Sep 05 #Javascript
React路由鉴权的实现方法
Sep 05 #Javascript
You might like
php mysql 判断update之后是否更新了的方法
2012/01/10 PHP
thinkphp普通查询与表达式查询实例分析
2014/11/24 PHP
在服务端(Page.Write)调用自定义的JS方法详解
2013/08/09 Javascript
java必学必会之static关键字
2015/12/03 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
2016/05/05 Javascript
深入理解JavaScript中为什么string可以拥有方法
2016/05/24 Javascript
星期几的不同脚本写法(推荐)
2016/06/01 Javascript
JS中检测数据类型的几种方式及优缺点小结
2016/12/12 Javascript
Javascript中数组去重与拍平的方法示例
2017/02/03 Javascript
Javascript快速实现浏览器系统通知
2017/08/26 Javascript
jquery实现用户登陆界面(示例讲解)
2017/09/06 jQuery
nodejs项目windows下开机自启动的方法
2017/11/22 NodeJs
JavaScript面向对象的程序设计(犯迷糊的小羊)
2018/05/27 Javascript
微信小程序时间轴实现方法示例
2019/01/14 Javascript
详解vue几种主动刷新的方法总结
2019/02/19 Javascript
详解vue中使用微信jssdk
2019/04/19 Javascript
Django+Vue实现WebSocket连接的示例代码
2019/05/28 Javascript
Vue父子组件传值的一些坑
2020/09/16 Javascript
[47:43]完美世界DOTA2联赛PWL S3 Magama vs GXR 第二场 12.19
2020/12/24 DOTA
Python 中 Virtualenv 和 pip 的简单用法详解
2017/08/18 Python
Python环境搭建之OpenCV的步骤方法
2017/10/20 Python
python用户管理系统的实例讲解
2017/12/23 Python
python numpy元素的区间查找方法
2018/11/14 Python
Python使用requests提交HTTP表单的方法
2018/12/26 Python
Python中的正则表达式与JSON数据交换格式
2019/07/03 Python
瑞典时尚耳机品牌:Urbanears
2017/07/26 全球购物
意大利制造的男鞋和女鞋:SCAROSSO
2018/03/07 全球购物
护士上岗前培训自我鉴定
2014/04/20 职场文书
喝酒驾驶检讨书
2014/10/01 职场文书
2014年扶贫工作总结
2014/11/18 职场文书
2015年财务经理工作总结
2015/05/13 职场文书
教师节随笔
2015/08/15 职场文书
《风筝》教学反思
2016/02/23 职场文书
写好Python代码的几条重要技巧
2021/05/21 Python
配置nginx 重定向到系统维护页面
2021/06/08 Servers
解析MySQL binlog
2021/06/11 MySQL