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

 更新时间:2019-09-08 18:01:02   作者:佚名   我要评论(0)

我们web页面中有几个页面是有定时器在刷新的,并且查询的内容还不少,给服务器造成了不少压力。这些接口已经尽量优化,能放到缓存的都放到缓存。然后主管又提

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

您可能感兴趣的文章:

  • layer弹出子iframe层父子页面传值的实现方法
  • 跨域传值即主页面与iframe之间互相传值
  • layui type2 通过url给iframe子页面传值的例子

相关文章

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

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

    我们web页面中有几个页面是有定时器在刷新的,并且查询的内容还不少,给服务器造成了不少压力。这些接口已经尽量优化,能放到缓存的都放到缓存。然后主管又提
    2019-09-08
  • Vue.js如何使用Socket.IO的示例代码

    Vue.js如何使用Socket.IO的示例代码

    在很多需求业务中,都需要浏览器和服务器实时通信来实现功能,比如:扫码登录(扫码后,手机确认登录,PC网页完成登录并跳转)、订单语言提醒等,这些都是建立在
    2019-09-08
  • layui select 禁止点击的实现方法

    layui select 禁止点击的实现方法

    直接上代码啦 注意事项: 1. 必须写 layui.use([form]) 2. 先把属性设置为disabled 3. 再form.render()一下 以上这篇layui select 禁止点击的实现方法就是
    2019-09-08
  • 如何阻止小程序遮罩层下方图层滚动

    如何阻止小程序遮罩层下方图层滚动

    这篇文章主要介绍了如何阻止小程序遮罩层下方图层滚动,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-08
  • 在layui中select更改后生效的方法

    在layui中select更改后生效的方法

    在layui中重新渲染表单这一步比较重要,部分表单元素需要重新渲染后才能生效,例如select 建议在js中放入以下function: //重新渲染表单 function
    2019-09-08
  • postgresql中的ltree类型使用方法

    postgresql中的ltree类型使用方法

    postgresql有很多比较妖的数据类型,ltree算一个。 简介 ltree是Postgresql的一个扩展类型 http://www.sai.msu.su/~megera...,在解决树形结构的数据存
    2019-09-06
  • springmvc如何进行异常处理

    springmvc如何进行异常处理

    异常处理 局部处理(直接写在处理器中) @ExceptionHandler public ModelAndView error(Exception exception) { ModelAndView mv = new ModelAndView()
    2019-09-06
  • Docker镜像的导入导出的实现方法

    Docker镜像的导入导出的实现方法

    本文介绍Docker镜像的导入导出,用于迁移、备份、升级等场景,准备环境如下: CentOS 7.0 Docker 1.18 导入导出命令介绍 涉及的命令有export、import、
    2019-09-06
  • Python使用Slider组件实现调整曲线参数功能示例

    Python使用Slider组件实现调整曲线参数功能示例

    本文实例讲述了Python使用Slider组件实现调整曲线参数功能。分享给大家供大家参考,具体如下: 一 代码 import numpy as np import matplotlib.pyplot as p
    2019-09-06
  • 微信小程序 组件的外部样式externalClasses使用详解

    微信小程序 组件的外部样式externalClasses使用详解

    启用外部样式: 自定义组件: v-tag 在html 引入 在组件写外部样式的css : .ex-tag { background-color: #fffbdd ; } 在组件使用该外部的样式 这个时候
    2019-09-06

最新评论