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中interval与setTimeOut的区别示例介绍
Mar 14 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
Aug 24 Javascript
Vue的百度地图插件尝试使用
Sep 06 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
浅谈 vue 中的 watcher
Dec 04 Javascript
jquery学习笔记之无new构建详解
Dec 07 jQuery
js实现上传并压缩图片效果
Jan 10 Javascript
详解小程序不同页面之间通讯的解决方案
Nov 23 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
Mar 28 Javascript
Vue 列表上下过渡效果的实例代码
Jun 25 Javascript
小程序分页实践之编写可复用分页组件
Jul 18 Javascript
微信小程序使用npm包的方法步骤
Aug 13 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
php5.2以下版本无json_decode函数的解决方法
2014/05/25 PHP
面向对象的javascript(笔记)
2009/10/06 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
2013/11/05 Javascript
Javasipt:操作radio标签详解
2013/12/30 Javascript
举例说明如何为JavaScript的方法参数设置默认值
2015/11/17 Javascript
原生js实现手风琴功能(支持横纵向调用)
2017/01/13 Javascript
WebPack基础知识详解
2017/01/16 Javascript
js中的面向对象入门
2017/03/06 Javascript
vue2.0全局组件之pdf详解
2017/06/26 Javascript
在vue中获取dom元素内容的方法
2017/07/10 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
js实现本地时间同步功能
2017/08/26 Javascript
AngularJS模态框模板ngDialog的使用详解
2018/05/11 Javascript
Node.js 使用request模块下载文件的实例
2018/09/05 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
2018/09/17 Javascript
js比较两个单独的数组或对象是否相等的实例代码
2019/04/28 Javascript
微信小程序实现横向滚动导航栏效果
2019/12/12 Javascript
简单谈谈python的反射机制
2016/06/28 Python
示例详解Python3 or Python2 两者之间的差异
2018/08/23 Python
python调用动态链接库的基本过程详解
2019/06/19 Python
python代理工具mitmproxy使用指南
2019/07/04 Python
Django配置文件代码说明
2019/12/04 Python
Python join()函数原理及使用方法
2020/11/14 Python
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
2012/12/07 HTML / CSS
深入理解HTML5定时器requestAnimationFrame的使用
2018/12/12 HTML / CSS
英国和世界各地鲜花速递专家:Arena Flowers
2018/02/10 全球购物
Jowissa官方网站:瑞士制造的手表,优雅简约的设计
2020/07/29 全球购物
退伍老兵事迹材料
2014/01/31 职场文书
公司薪酬管理制度
2014/01/31 职场文书
思想作风整顿个人剖析材料
2014/10/06 职场文书
2014年采购员工作总结
2014/11/18 职场文书
2015年试用期工作总结
2014/12/12 职场文书
MySQL大小写敏感的注意事项
2021/05/24 MySQL
Python Django ORM连表正反操作技巧
2021/06/13 Python
python中的random模块和相关函数详解
2022/04/22 Python
深入理解pytorch库的dockerfile
2022/06/10 Python