对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!


Posted in Javascript onOctober 29, 2011

在上一篇文章: 觉得猪八戒网左下角的文字滚动,效果不错,自己摸索了一下,以自己的方法实现了!

就有这种效果,不过影响不大。Demo的影响就大了!

网上也有人出现过这样的问题看下面的帖子地址:

firefox 6下 setInterval的一个问题

讨论的人很多,但没给出答案来。

怎么想都想不明白!

今天,突然茅塞顿开,可能是线程的概念,但是具体原因还是不明白,希望有人了解其原应告知,非常感激!

Demo 中黑色的Div是不受浏览器标签切换影响的

而红色的Div会受到影响。
HTML:

<div id="move" style="position: absolute; width: 100px; height: 100px; top: 0pt; left: 0pt; background: none repeat scroll 0% 0% #000000; z-index: 999; color: #ffffff;">我不受浏览器标签切换影响!Hoooo</div> 
<div id="move2" style="position: absolute; width: 100px; height: 100px; top: 0pt; left: 0pt; background: none repeat scroll 0% 0% red; z-index: 999; color: #ffffff;">我受浏览器标签切换影响!5555</div>

javascript:
(function(){ 
var elem = Meng.getId('move'), 
elem2 = Meng.getId('move2'), 
pos = Meng.getElemViewPosition(elem), 
view = Meng.getBrowserView(), 
//灰块运动函数 
move = function(){ 
var t1 = Meng.animate(elem,{top:0,left:0},{top:view.height-100,left:view.width-100},3000,function(){ 
var t2 = Meng.animate(elem,{left:view.width-100},{left:100-view.width},3000,function(){ 
var t3 = Meng.animate(elem,{top:view.height-100},{top:100-view.height},3000,function(){ 
move();//确定t3运动完后,我再回调move()函数。 
}); 
}); 
}); 
}; 
move(); 
// 红块运动函数 
Meng.setStyle(elem2,{top:0,left:(view.width-100)+'px'}); 
var move2 = function(){ 
var t1 = Meng.animate(elem2,{top:0,left:view.width-100},{top:view.height-100,left:100-view.width},3000,function(){ 
var t2 = Meng.animate(elem2,{top:view.height-100},{top:100-view.height},3000,function(){ 
var t3 = Meng.animate(elem2,{left:0},{left:view.width-100},3000,function(){ 
}); 
}); 
}); 
}; 
move2(); 
setInterval(function(){move2();},9050); 
// 红块运动函数 
})();
Javascript 相关文章推荐
js用正则表达式来验证表单(比较齐全的资源)
Nov 17 Javascript
浅析JavaScript中的隐式类型转换
Dec 05 Javascript
js操作table元素实现表格行列新增、删除技巧总结
Nov 18 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
May 10 Javascript
Java  Spring 事务回滚详解
Oct 17 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
Jan 11 Javascript
原生javascript实现图片放大镜效果
Jan 18 Javascript
Angularjs中使用轮播图指令swiper
May 30 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
Jun 12 Javascript
node.js学习之断言assert的使用示例
Sep 28 Javascript
使用Angular CLI从蓝本生成代码详解
Mar 24 Javascript
js DOM的事件常见操作实例详解
Dec 16 Javascript
仿猪八戒网左下角的文字滚动效果
Oct 28 #Javascript
js实现双向链表互联网机顶盒实战应用实现
Oct 28 #Javascript
js常用代码段收集
Oct 28 #Javascript
jWiard 基于JQuery的强大的向导控件介绍
Oct 28 #Javascript
理解JSON:3分钟课程
Oct 28 #Javascript
Kibo 用于处理键盘事件的Javascript工具库
Oct 28 #Javascript
stream.js 一个很小、完全独立的Javascript类库
Oct 28 #Javascript
You might like
SONY SRF-M100的电路分析
2021/03/02 无线电
ThinkPHP中图片按比例切割的代码实例
2019/03/08 PHP
js模拟类继承小例子
2010/07/17 Javascript
面向对象的Javascript之一(初识Javascript)
2012/01/20 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
2013/01/21 Javascript
网页右下角弹出窗体实现代码
2014/06/05 Javascript
用javascript关闭本窗口技巧小结
2014/09/05 Javascript
angularJS 中input示例分享
2015/02/09 Javascript
jQuery对JSON数据进行排序输出的方法
2015/06/24 Javascript
完美实现八种js焦点轮播图(下篇)
2020/04/20 Javascript
深入理解js generator数据类型
2016/08/16 Javascript
jQuery如何防止Ajax重复提交
2016/10/14 Javascript
JS分页的实现(同步与异步)
2017/09/16 Javascript
JS中数组与对象的遍历方法实例小结
2018/08/14 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
Bootstrap table 实现树形表格联动选中联动取消功能
2019/09/30 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
2019/12/04 Javascript
Vue中computed及watch区别实例解析
2020/08/01 Javascript
解决vue项目中出现Invalid Host header的问题
2020/11/17 Javascript
Python稀疏矩阵及参数保存代码实现
2020/04/18 Python
Pytorch 使用CNN图像分类的实现
2020/06/16 Python
Pandas中DataFrame基本函数整理(小结)
2020/07/20 Python
Python爬虫+tkinter界面实现历史天气查询的思路详解
2021/02/22 Python
matplotlib阶梯图的实现(step())
2021/03/02 Python
html5绘制时钟动画
2014/12/15 HTML / CSS
ABOUT YOU匈牙利:500个最受欢迎的时尚品牌
2019/07/19 全球购物
泰海淘:泰国king Power王权免税集团旗下跨境海淘综合型电商
2020/07/26 全球购物
大专生自我评价
2014/01/28 职场文书
鸿星尔克广告词
2014/03/21 职场文书
优秀护士演讲稿
2014/04/30 职场文书
中国梦主题教育活动总结
2014/05/05 职场文书
大学生就业自我推荐信
2014/05/10 职场文书
婚前财产协议书范本
2014/10/19 职场文书
苦儿流浪记读书笔记
2015/07/01 职场文书
2016年五一促销广告语
2016/01/28 职场文书
SpringCloud Feign请求头删除修改的操作代码
2022/03/20 Java/Android