对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 创建对象
Jul 17 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
Jul 22 Javascript
JavaScript打开word文档的实现代码(c#)
Apr 16 Javascript
AngularJS优雅的自定义指令
Jul 01 Javascript
Three.js学习之几何形状
Aug 01 Javascript
javascript输出AscII码扩展集中的字符方法
Dec 26 Javascript
JavaScript定义全局对象的方法示例
Jan 12 Javascript
ECMAScript6变量的解构赋值实例详解
Sep 19 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
vue组件开发之用户无限添加自定义填写表单的方法
Aug 28 Javascript
详解Vue路由自动注入实践
Apr 17 Javascript
tsconfig.json配置详解
May 17 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
浅析Dos下运行php.exe,出现没有找到php_mbstring.dll 错误的解决方法
2013/06/29 PHP
php gd等比例缩放压缩图片函数
2016/06/12 PHP
thinkPHP+LayUI 流加载实现功能
2019/09/27 PHP
关于IE7 IE8弹出窗口顶上
2008/12/22 Javascript
让ie运行js时提示允许阻止内容运行的解决方法
2010/10/24 Javascript
js去除重复字符串两种实现方法
2013/01/09 Javascript
利用jQuery实现可输入搜索文字的下拉框
2013/10/23 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
2014/02/27 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
2014/08/27 Javascript
nodejs教程之制作一个简单的文章发布系统
2014/11/21 NodeJs
详解JS函数重载
2014/12/04 Javascript
JavaScript将字符串转换为整数的方法
2015/04/14 Javascript
jQuery的position()方法详解
2015/07/19 Javascript
Sea.JS知识总结
2016/05/05 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
2018/01/08 jQuery
Vue中computed与methods的区别详解
2018/03/24 Javascript
Vue的watch和computed方法的使用及区别介绍
2018/09/06 Javascript
jQuery实现图片下载代码
2019/07/18 jQuery
Vue中图片Src使用变量的方法
2019/10/30 Javascript
用Python编写一个简单的俄罗斯方块游戏的教程
2015/04/03 Python
Python的Django框架中从url中捕捉文本的方法
2015/07/20 Python
Python爬虫实现网页信息抓取功能示例【URL与正则模块】
2017/05/18 Python
python实现两个文件合并功能
2018/04/01 Python
python scatter散点图用循环分类法加图例
2019/03/19 Python
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
同学会邀请书大全
2014/01/12 职场文书
葛优非诚勿扰搞笑征婚台词
2014/03/17 职场文书
奥巴马的演讲稿
2014/05/15 职场文书
合作合同协议书范本
2015/01/27 职场文书
2015年父亲节寄语
2015/03/23 职场文书
详解MySQL 用户权限管理
2021/04/20 MySQL
MySQL 百万级数据的4种查询优化方式
2021/06/07 MySQL
SpringBoot+VUE实现数据表格的实战
2021/08/02 Java/Android
使用 DataAnt 监控 Apache APISIX的原理解析
2022/07/07 Servers
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS