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 相关文章推荐
JavaScript实现Sleep函数的代码
Mar 04 Javascript
javascript静态的url如何传递
May 03 Javascript
json跟xml的对比分析
Jun 10 Javascript
jquery cookie实现的简单换肤功能适合小网站
Aug 25 Javascript
node.js中的http.response.removeHeader方法使用说明
Dec 14 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
Jul 22 Javascript
简单谈谈原生js的math对象
Jun 27 Javascript
vue todo-list组件发布到npm上的方法
Apr 04 Javascript
React如何解决fetch跨域请求时session失效问题
Nov 02 Javascript
前端面试知识点目录一览
Apr 15 Javascript
基于vue实现一个神奇的动态按钮效果
May 15 Javascript
前端框架ECharts dataset对数据可视化的高级管理
Dec 24 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
采用header定义为文件然后readfile下载(隐藏下载地址)
2014/01/31 PHP
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
IE和Firefox下javascript的兼容写法小结
2008/12/10 Javascript
学习ExtJS border布局
2009/10/08 Javascript
表单切换,用回车键替换Tab健(不支持IE)
2011/07/20 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
2013/03/18 Javascript
Tab切换组件(选项卡功能)实例代码
2013/11/21 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
2014/05/05 Javascript
jQuery+html5实现div弹出层并遮罩背景
2015/04/15 Javascript
js HTML5 Canvas绘制转盘抽奖
2020/09/13 Javascript
Html5+jQuery+CSS制作相册小记录
2016/12/30 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
2018/04/21 Javascript
JavaScript设计模式之工厂模式简单实例教程
2018/07/03 Javascript
js实现坦克移动小游戏
2019/10/28 Javascript
Vuex的API文档说明详解
2020/02/05 Javascript
[08:54]《一刀刀一天》之DOTA全时刻18:十九支奔赴西雅图队伍全部出炉
2014/06/04 DOTA
python实现哈希表
2014/02/07 Python
深入讲解Python中面向对象编程的相关知识
2015/05/25 Python
python实现微信自动回复功能
2018/04/11 Python
python常用函数与用法示例
2019/07/02 Python
python中用logging实现日志滚动和过期日志删除功能
2019/08/20 Python
在OpenCV里使用特征匹配和单映射变换的代码详解
2019/10/23 Python
python3注册全局热键的实现
2020/03/22 Python
PyTorch-GPU加速实例
2020/06/23 Python
python中return不返回值的问题解析
2020/07/22 Python
Python GUI库Tkiner使用方法代码示例
2020/11/27 Python
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
2013/08/02 HTML / CSS
销售辞职报告范文
2014/01/12 职场文书
商场促销活动方案
2014/02/08 职场文书
六一儿童节活动总结
2014/08/27 职场文书
党的群众路线教育实践活动对照检查材料(个人)
2014/09/24 职场文书
贫困生助学金感谢信
2015/01/21 职场文书
2015年工会工作总结
2015/03/30 职场文书
2016年教师政治思想表现评语
2015/12/02 职场文书
如何利用map实现Nginx允许多个域名跨域
2021/03/31 Servers
Spring boot admin 服务监控利器详解
2022/08/05 Java/Android