对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 相关文章推荐
javascript基础的动画教程,直观易懂
Jan 10 Javascript
利用location.hash实现跨域iframe自适应
May 04 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
Mar 27 Javascript
JQuery表单验证插件EasyValidator用法分析
Nov 15 Javascript
JavaScript原生对象之Number对象的属性和方法详解
Mar 13 Javascript
JS组件Bootstrap Table使用实例分享
May 30 Javascript
详解JS中的立即执行函数
Feb 24 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
May 17 Javascript
MUI实现上拉加载和下拉刷新效果
Jun 30 Javascript
node使用UEditor富文本编辑器的方法实例
Jul 11 Javascript
简单了解小程序+node梳理登陆流程
Jun 24 Javascript
微信小程序实现拨打电话功能的示例代码
Jun 28 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
自己动手做一个SQL解释器
2006/10/09 PHP
PHP中你应该知道的require()文件包含的正确用法
2015/06/12 PHP
46 个非常有用的 PHP 代码片段
2016/02/16 PHP
thinkphp框架下404页面设置 仅三步
2016/05/14 PHP
PHP微信开发之文本自动回复
2016/06/23 PHP
jquery获取div宽度的实现思路与代码
2013/01/13 Javascript
JS定时器实例详细分析
2013/10/11 Javascript
jQuery focus和blur事件的应用详解
2014/01/26 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
2014/02/07 Javascript
js函数定时器实现定时读取系统实时连接数
2014/04/30 Javascript
JS实现CheckBox复选框全选全不选功能
2015/05/06 Javascript
javascript设计简单的秒表计时器
2020/09/05 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
2016/12/02 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
2017/04/01 Javascript
利用jQuery解析获取JSON数据
2017/04/08 jQuery
详解node.js平台下Express的session与cookie模块包的配置
2017/04/26 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
2017/08/29 Javascript
让Vue也可以使用Redux的方法
2018/05/23 Javascript
javascript实现考勤日历功能
2018/11/29 Javascript
vue基于两个计算属性实现选中和全选功能示例
2019/02/08 Javascript
jquery制作的移动端购物车效果完整示例
2020/02/24 jQuery
[53:15]Newbee vs Pain 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
django基于restframework的CBV封装详解
2019/08/08 Python
使用pyshp包进行shapefile文件修改的例子
2019/12/06 Python
Python析构函数__del__定义原理解析
2020/11/20 Python
使用css实现android系统的loading加载动画
2019/07/25 HTML / CSS
有趣的睡衣和礼物:LazyOne
2019/11/27 全球购物
英国门销售网站:Green Tree Doors
2020/01/07 全球购物
港湾网络笔试题
2014/04/19 面试题
运动会广播稿50字
2014/01/26 职场文书
辅导员评语
2014/05/04 职场文书
暑期社会实践证明书
2014/11/17 职场文书
离婚协议书样本
2015/01/26 职场文书
酒店员工手册范本
2015/05/14 职场文书
2019军训心得体会
2019/06/27 职场文书
vue 给数组添加新对象并赋值
2022/04/20 Vue.js