当前位置:
  1. 首页 »
  2. 随笔 »
  3. 正文

js定时器setinterval越来越快的原因

零分 3,510

之前写了一个模板,焦点图的播放速度会越来越快,做过清除过定时器clearInterval,似乎并没有改变,也就放着并无理会!

最近写另一个模板,焦点图调用同样的JS,长时间观察,并没有发现定时器setinterval越来越快的现象!又重新回到之前的模板,仔细的观察了一下,可能是因为设置了两个setinterval的原因!

JS的运行时单线程的,两个setinterval可能会发生冲突,导致定时器越来越快!虽然调用了不同的function!完成之后回去去掉一个setinterval再试试!

第二次:

模板需要轮播焦点图,支持手机触屏滑动,效果代码很早之前就写了,使用了setInterval定时器播放,animate播放效果,速度一直出现越来越快的问题!

第一次修改:clearInterval(timer);将timer定义到全局变量,解决了当前页播放越来越快的问题!使用一段时间后,有出现了越来越快的问题,随后就搁置了!

第二次修改:将setInterval改成了setTimeout,使用一段时间后,发现还是会有越来越快的问题!

之后百度了一个轮播焦点图,使用一段时间后,感觉不顺手!

第三次修改:每次setInterval前,都添加一次clearInterval,在切换标签之后,一段时间,还是会越来越快!

百度了一下,还是没有找到具体的解决方案!继续使用上次百度的轮播图代码(真心不符合心里要求)

今天再次百度了下,了解到了一个问题,越来越快不应该发生在setInterval上,因为每次越来越快之后,轮播图的小圆点是正常的,之后播放效果越来越快!问题可能出现在了animate上!

“发现这是因为浏览器本着节省内存的性质,当切换到其他页面时,页面的定时器不运动,但是动画依然排列,当切换回来的时候,动画加速运动,出现错误,在轮播图之类的页面经常会发生这样的情况”

百度出来的说明,检查了下代码,animate的写法确实是和其他的不一样,别人的写法是:stop.animate,我直接就animate了,所以,可能是在切换浏览器的时候,setInterval停止了,但是animate动画却一直在排列,所以当切换浏览器标签回来的时候,前面已经积压了一堆的动画一下子就开始全部播放了,clearInterval也无法起作用,因为压根和clearInterval无关

所以,第四次修改,将animate改成stop.animate,另外顺便判断了下当前页面是否可见document.onvisibilitychange,当切换到其他标签的时候,停止顺便也停止了下定时器!

$(document).on('visibilitychange', function (e) {
if (e.target.visibilityState === "visible") {
play();
} else {
stop();
}
});

现在切换回来的时候停留在了切换走时的动画页面!应该不会再发生越来越快的问题了!

标签:

JQ各种top,height,width区分

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight:获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 offsetTop:
知识 2,150

input实时显示input内容字数

input实时显示input内容长度,写这个是因为自定义优站需要入库,入库的标题淘宝很牛逼的限制成了22个字数,因为是自定义后台直接入库的,每次都去数一下字数是不是更牛逼?好吧,这是废话。于是就百度了一下,input实时显示input内容字数。 正常环境的JS: <input type='text' id='num' name='tel' value='12345' onKeyUp="showLen(this);"> <span id="span">已输入XX位</span>       <script type="text/javascript">    showLe
笔记 2,676

免费往往最贵,曾经也注册过亚马逊AWS的免费VPS扣费12美元

想着使用下境外免费的VPS,在成功注册了亚马逊AWS之后,第一个月被扣了1.2美元,之后果断删除实例,注销账号。 我朋友,第一个被扣了0.37美元,可能是因为甲骨文被删除了实例,之后把一些数据搬到了亚马逊。 结果,上个月发来了账单,扣费12.2美元,折合人民币大概有60-70块钱了,还不如买一台付费的vps。 现在估计正在删除实例以及注销账号了。 亚马逊AWS免费一年的VPS,已经给你们踩坑了,对于境外绑实体卡的,还是谨慎谨慎再谨慎,对于国内的扣款协议,写的明明白白,还可以解除扣款。 上次招行打来电话,听不清楚到底说了些什么,回答嗯嗯嗯,之后就被绑定了自动扣款保险,看了短信才知道,之后登录AP
随笔 2,047

N270渣主机折腾Windows xp 后又换回了Windows Thin PC

在海鲜市场淘的华硕EEE BOX B202 N270渣主机,之前试过Linux、Android X86,感觉都不尽人意,最后安装了Windows 7精简版 Windows Thin PC,感觉还行,就安装一个影视软件,淘了一个VGA转HDMI接口,连着电视看电视电影。DVI转VGA接口,渣主机淘来的时候就已经有了,配件是挺齐全的。 最后,又淘了一个迷你键盘,放在床头,搜索、关机就不需要庞大的鼠键套装了。 但是,昨天,忽然的想着,如果换回Windows XP,表现会不会更好一点,说干就干,去找了XP的原版,通过PE安装了下。 还是那句话,理想很丰满,现实很骨干,Windows XP毕竟是年代久远
随笔 1,862

老旧电脑翻车记:海鲜市场收了一台N270小主机,最后决定安装了Windows Thin PC

前段时间,一直想给电视弄个盒子,翻了翻海鲜市场,想淘个盒子,最后看到同城的有个再出华硕的Eee Box PC,N270的渣渣处理器,想着怎么说也比盒子强(后来,我发现我想错了)。 经过一段时间的心理挣扎,最后决定50块钱收了这台小主机,同城花了8块钱的跑腿费去拿,一共花费58块钱。主机开机是XP系统。但是,终究还是卡成了PPT。 成色还是不错,一面的膜还在,盒子还很新,说明书,光盘啥的都有,估计买的时候升级过内存,实际是2G内存,配件什么的也都有,壁挂架,支架都有。 理想很丰满,现实很骨感。N270实在是太渣了! 原本是想给它安装个Android X86,翻了一圈,发现已经更新到了9.0了,想
随笔 2,114