完美解决setInterval在浏览器切换时加速的问题
JavaScript中当我们切换浏览器的时候,setInterval会加快速度
导致这个原因是:
发现这是因为浏览器本着节省内存的性质,当切换到其他页面时,采油系统页面的定时器不运动,但是动画依然排列,当切换回来的时候,动画加速运动,出现错误,在轮播图之类的页面经常会发生这样的情况
在这里我们需要用到以下三个知识点:
- document.onvisibilitychange :
只要页面发生变化,不管是切换到其他的页面还是把浏览器缩小,都会触发这个事件。
- document.hidden
这个是指当页面不是当前页面时为true,否则为false
- document.visibilityState:
这个属性有四个值,分为是:visible,hidden,prerender,unloaded
visible 表示当前网页是可见或者是部分可见的。
hidden:当前网页是不可见的
prerender 网页内容被预渲染并且用户不可见
unloaded 如果文档被卸载,那么这个值将被返回
实际操作效果如下:
document.onvisibilitychange=function(){ console.log("hidden"+":"+document.hidden); console.log("visibilityState"+":"+document.visibilityState); } 复制代码
执行效果如下:
解决setInterval在浏览器切换中的问题:
思路:如果页面是不可见的,那么我们就会清除定时器,如果页面是可见的,那么我们就重新开启定时器。
所以我们需要用document.onvisibilitychange进行监听,然后用document.visibilityState或者是document.hidden进行判断。
实际操作:
document.onvisibilitychange=function(){ if(document.visibilityState=="visible"){ timer=setInterval(slidemove, 1000); }else{ clearInterval(timer); } } 复制代码
jq中animate的解决
如果用的是jq的animate这个方法,就只需要到这个方法的前面加上stop(true,true)
$(".slidePanel").stop(true,true).animate({ "left": -iNow*varWidth+"px", "speed":300 });
作者:蜗牛君_
链接:https://juejin.im/post/5b30a4a451882574ba421b68
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
Java并发编程笔记之ConcurrentLinkedQueue源码探究
JDK 中基于链表的非阻塞无界队列 ConcurrentLinkedQueue 原理剖析,ConcurrentLinkedQueue 内部是如何使用 CAS 非阻塞算法来保证多线程下入队出队操作的线程安全? ConcurrentLinkedQueue是线程安全的无界非阻塞队列,其底层数据结构是使用单向链表实现,入队和出队操作是使用我们经常提到的CAS来保证线程安全的。 我们首先看一下ConcurrentLinkedQueue的类图结构先,好有一个内部逻辑有一个大概的印象,如下图所示: 可以清楚的看到ConcurrentLinkedQueue内部的队列是使用单向链表方式实现,类中两个volatile 类型的Node 节点分别用来存放队列的首位节点。 首先我们先来看一下ConcurrentLinkedQueue的构造函数,如下: public ConcurrentLinkedQueue() { head = tail = new Node<E>(null); } 通过无参构造函数可知默认头尾节点都是指向 item 为 null 的哨兵节点。 Node节点内部则维护一个volat...
- 下一篇
mybatis开发Dao
参考文献:https://blog.csdn.net/u013036274/article/details/55668317 原始dao方式 需要写dao接口和dao实现类。 创建dao接口:UserDao.java package cn.itcast.mybatis.dao; import cn.itcast.mybatis.po.Employee; public interface UserDao { public Employee findUserById(int id) throws Exception; public void insertUser(Employee employee) throws Exception; public void deleteUser(int id) throws Exception; } 创建dao实现类:UserDaoImpl.java package cn.itcast.mybatis.dao; import org.apache.ibatis.session.SqlSession; import org.apache.ibatis.se...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS7,CentOS8安装Elasticsearch6.8.6
- CentOS7安装Docker,走上虚拟化容器引擎之路
- Eclipse初始化配置,告别卡顿、闪退、编译时间过长
- Mario游戏-低调大师作品
- 2048小游戏-低调大师作品
- SpringBoot2初体验,简单认识spring boot2并且搭建基础工程
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- SpringBoot2整合Thymeleaf,官方推荐html解决方案
- Red5直播服务器,属于Java语言的直播服务器