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 相关文章推荐
DOM精简教程
Oct 03 Javascript
List Information About the Binary Files Used by an Application
Jun 18 Javascript
JS重要知识点小结
Nov 06 Javascript
javascript的原生方法获取数组中的最大(最小)值
Dec 19 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
Nov 27 Javascript
使用JavaScript获取电池状态的方法
May 03 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
Oct 19 Javascript
jQuery焦点图切换特效代码分享
Sep 15 Javascript
js实现带缓动动画的导航栏效果
Jan 16 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
Feb 10 Javascript
微信小程序中时间戳和日期的相互转换问题
Jul 09 Javascript
微信小程序数据统计和错误统计的实现方法
Jun 26 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 数组遍历的差异(array_diff 的实现)
2008/03/23 PHP
8个出色的WordPress SEO插件收集
2011/02/26 PHP
php通过字符串调用函数示例
2014/03/02 PHP
PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例
2020/08/17 PHP
JavaScript 图片预览效果 推荐
2009/12/22 Javascript
jQuery 表单验证扩展代码(一)
2010/10/11 Javascript
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
2012/12/21 Javascript
ie支持function.bind()方法实现代码
2012/12/27 Javascript
获取内联和链接中的样式(js代码)
2013/04/11 Javascript
iframe如何动态创建及释放其所占内存
2014/09/03 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
2015/06/11 Javascript
使用AngularJS来实现HTML页面嵌套的方法
2015/06/17 Javascript
javascript Slip.js实现整屏滑动的手机网页
2015/11/25 Javascript
JavaScript程序开发之JS代码放置的位置
2016/01/15 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
2016/10/12 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
2016/12/25 Javascript
Vue.js更改调试地址端口号的实例
2018/09/19 Javascript
Bootstrap 按钮样式与使用代码详解
2018/12/09 Javascript
Python中__name__的使用实例
2015/04/14 Python
Python3实现取图片中特定的像素替换指定的颜色示例
2019/01/24 Python
python实现连连看游戏
2020/02/14 Python
使用python采集Excel表中某一格数据
2020/05/14 Python
Python中格式化字符串的四种实现
2020/05/26 Python
Python enumerate() 函数如何实现索引功能
2020/06/29 Python
python3爬虫中多线程的优势总结
2020/11/24 Python
python3实现名片管理系统(控制台版)
2020/11/29 Python
Origins悦木之源香港官网:雅诗兰黛集团高端植物护肤品牌
2018/03/21 全球购物
卫校中专生个人自我评价
2013/09/19 职场文书
学习礼仪心得体会
2014/09/01 职场文书
自查自纠工作情况报告
2014/10/29 职场文书
大学生志愿者心得体会
2016/01/15 职场文书
解决Golang time.Parse和time.Format的时区问题
2021/04/29 Golang
Windows中Redis安装配置流程并实现远程访问功能
2021/06/07 Redis
四十九个javascript小知识实用技巧
2021/11/20 Javascript