前段时间,所写的一个”js无间隙滚动效果“,当页面离开后,重新返回时,会出现动画的错乱。我以为是因为我代码逻辑的原因导致的,但是,当在火狐浏览器上进行浏览时却没有动画错乱的问题。

于是乎,在网上查找是否有人遇到相似的问题。效果似乎不是很理想,刚开始发现仅仅有一个人遇到和我相似的问题,解决办法是用window的blur和focus事件进行处理,如下图:

,当然了,这种方法是行得通的,但是,当使用双屏显示时,你的文档页面是可见的,当发生blur事件时,会清除动画,但是此时因为双屏的原因,你的浏览器的视图仍然可见。此时,便发生了比较尴尬的事:视图可见,但是动画却停止了。

从而只能另寻他法,

visibilitychange事件。

简单的说,当用户最小化网页或移动到另一个标签时,API会发送 visibilitychange 有关该网页的可见性的事件。你可以检测到该事件并执行一些操作或行为。例如:标签页隐藏的时候停止播放音乐视频、停止一些不必要的轮询,还有停止一些诸如轮播等循环动画效果等等。这些可以节省服务器和本地的开销;

此时要解决上述问题仍然不够,还需要一个属性进行监管控制就是:

document的可见性属性

Page Visibility (Second Edition) 中定义了2个只读的 document 属性:hidden 和 visibilityState

其中 document.hidden 是一个布尔值,简单的表示标签页显示或者隐藏。而 document.visibilityState 属性更为详细,目前有四个可能的值:

visible : 页面内容至少部分可见。这意味着在实际情况中,该网页是一个非最小化窗口的可见标签页。

hidden : 页面内容是对用户不可见。实际上,这意味着该文档是后台标签页或最小化窗口的一部分,或者系统锁屏是时的状态。

prerender : 网页内容被预渲染并且用户不可见。

unloaded : 如果文档被卸载,那么这个值将被返回。

一般情况下我们使用 document.hidden 就能满足通常的需求。

visibilitychange监听事件

你可以在 document对象上注册一个监听 visibilitychange 事件,根据 document.hidden 或者 document.visibilityState 属性做一些业务逻辑:

var time=  setInterval(function () {
_this.setAnimatedEleHeight()
},_this.settings.delay);
document.addEventListener('visibilitychange',function(){ //浏览器切换事件
if(document.visibilityState=='hidden') { //状态判断
clearInterval(time)
}else {
time=setInterval(function () {
_this.setAnimatedEleHeight()
},_this.settings.delay);
}
}); 此时,通过document的监听事件visibilitychange来判断浏览器视图的显隐,从而控制动画的清除与执行,就可以完美解决上述问的动画问题;

浏览器页面的显隐对js的setInterval()执行所产生的bug的更多相关文章

  1. JS/jquery实现鼠标控制页面元素显隐

    最近网站要上一个活动广告横幅,当用户鼠标划过时显隐二维码.像这种鼠标事件控制页面元素显隐的情况,码农们会经常遇到,可以通过javascript或jquery代码实现,下面就几种常见需求一起归纳一下. ...

  2. Uipath 获取当前浏览器页面URL

    文章来源东京IT青年前线 http://www.rpatokyo.com   Uipath 获取当前浏览器页面URL的方法 Inject Js Script   因为目前没有直接获取页面URL的Act ...

  3. 浏览器页面左上角出现undefined

    浏览器页面左上角出现undefined, js文档中: let list; list += html代码; 解决办法: let list = html代码;

  4. js代码的执行顺序及运算

    代码执行顺序:从上往下,一行一行的执行(也叫一个模块一个模块的执行) 变量的提升(它不是变量的功能,而是浏览器的功能) js代码如何执行? js代码执行前,浏览器会给他一个全局的环境 叫window, ...

  5. JS学习笔记:(一)浏览器页面渲染机制

    浏览器的内核主要分为渲染引擎和JS引擎.目前市面上常见的浏览器内核可以分为这四种:Trident(IE).Gecko(火狐).Blink(Chrome.Opera).Webkit(Safari).这里 ...

  6. Js 日期选择,可以的一个页面中重复使用本JS日历,兼容IE及火狐等主流浏览器,而且界面简洁、美观,操作体验也不错。

    <html> <head> <title>Js日期选择器并自动加入到输入框中</title> <meta http-equiv="con ...

  7. js禁止浏览器页面后退功能

    js禁止浏览器页面后退功能: <script> $(function(){ ) { //防止页面后退 history.pushState(null, null, document.URL) ...

  8. Vue-cli中使用vConsole,以及设置JS连续点击控制vConsole按钮显隐功能实现

    最近发现了一个鹅厂的仓库,实现起来比我这个方便[捂脸].https://github.com/AlloyTeam/AlloyLever 一.vue-cli脚手架中搭建的项目引入vConsole调试 1 ...

  9. 浏览器页面区域大小的js获取方法

    浏览器页面区域大小的获取:  /在IE.FireFox.Opera下都可以使用  document.body.clientWidth  document.body.clientHeight  //即可 ...

随机推荐

  1. [.NET] WeakReference的使用

    声明:本篇博客翻译自:http://tipsandtricks.runicsoft.com/CSharp/WeakReferences.html 由于水平(技术水平+英语理解能力)有限/不足,肯定会有 ...

  2. Android JIN简单单步调试

    ADTr20已经比较完美支持NDK开发了.可以集成ndk编译,只需在项目右键Add Native Support,就能自动生成jni文件,并部署编译环境(注意这个过程是不可逆的,手动删除jni文件后, ...

  3. Ansible 笔记 (1) - 安装和配置

    本文参考 <Ansible 自动化运维和最佳实践>,这两天刚读这本书,写写总结.主控机环境是 centos 7,被控机均是 centos 6.8 . 确保 python 版本大于 2.6 ...

  4. word复制粘贴表格不齐

    1.查找橡皮擦 2.有时候复制粘贴 表格 会将以前的东西格式也粘贴进来,需要清除格式和重新排版 3.word2007清除格式

  5. 装饰者模式及C++实现

    装饰者模式 时常会遇到这样一种情况,我已经设计好了一个接口,并且也有几个实现类,但是这时我发现我设计的时候疏忽了,忘记了一些功能,或者后来需求变动要求加入一些功能,最简单的做法就是修改接口,添加函数, ...

  6. MFC中的DLL、LIb文件的创建、使用

     动态链接库Dynamic-Linked Lib 的创建与使用 动态链接库(Dynamic Link Library 或者 Dynamic-link Library,缩写为 DLL),是微软公司在微软 ...

  7. iptables 增删查改

    一,安装并启动防火墙 二.添加防火墙规则 1.添加filter表 2.添加nat表 指定位置添加 三.删除iptables规则 四.查看防火墙规则 1.查看filter表 2.查看nat表 五.修改规 ...

  8. [Git00] Pro Git 一二章读书笔记

    记得知乎以前有个问题说:如果用一天的时间学习一门技能,选什么好?里面有个说学会Git是个很不错选择,今天就抽时间感受下Git的魅力吧.   Pro Git (Scott Chacon) 读书笔记:   ...

  9. C#Encoding

    1.Encoding (1).如何生成一个Encoding即一种编码 Encoding位于System.Text命名空间下,是一个抽象类,它的派生类如下图: 要实例化一个Encoding一共有以下两种 ...

  10. linux - 【LAMP环境配置安装注意安装步骤】 9

    (一)安装gcc glibc-devel glibc-headers ==>依赖项 kernel-headers ==>依赖项 libgomp gcc-c++ libstdc++-deve ...