对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 相关文章推荐
jQuery在vs2008及js文件中的无智能提示的解决方法
Dec 30 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
Nov 04 Javascript
AngularJS中处理多个promise的方式
Feb 02 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
Node.js实用代码段之获取Buffer对象字节长度
Mar 17 Javascript
jQuery soColorPacker 网页拾色器
Jun 22 Javascript
总结javascript三元运算符知识点
Sep 28 Javascript
Element Collapse 折叠面板的使用方法
Jul 26 Javascript
原生js+canvas实现贪吃蛇效果
Aug 02 Javascript
electron踩坑之remote of undefined的解决
Oct 06 Javascript
javascript canvas实现雨滴效果
Jun 09 Javascript
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
仿猪八戒网左下角的文字滚动效果
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
解析PHP计算页面执行时间的实现代码
2013/06/18 PHP
php生成过去100年下拉列表的方法
2015/07/20 PHP
thinkPHP自动验证、自动添加及表单错误问题分析
2016/10/17 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
短信提示使用 特效
2007/01/19 Javascript
javascript Zifa FormValid 0.1表单验证 代码打包下载
2007/06/08 Javascript
用JTrackBar实现的模拟苹果风格的滚动条
2007/08/06 Javascript
JAVASCRIPT IE 与 FF中兼容问题小结
2009/02/18 Javascript
jQuery版Tab标签切换
2011/03/16 Javascript
javascript数组去重3种方法的性能测试与比较
2013/03/26 Javascript
JS 实现Table相同行的单元格自动合并示例代码
2013/08/27 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
2014/06/19 Javascript
a标签click和href执行顺序探讨
2014/06/23 Javascript
jQuery获取样式中颜色值的方法
2015/01/29 Javascript
简介JavaScript中setUTCSeconds()方法的使用
2015/06/12 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
2016/10/17 Javascript
Bootstrap select实现下拉框多选效果
2016/12/23 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
2017/09/25 Javascript
详解Vue路由钩子及应用场景(小结)
2017/11/07 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
2019/05/14 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
2020/01/22 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
vuex分模块后,实现获取state的值
2020/07/26 Javascript
[02:42]完美大师赛主赛事淘汰赛第三日观众采访
2017/11/25 DOTA
Python list操作用法总结
2015/11/10 Python
详解利用django中间件django.middleware.csrf.CsrfViewMiddleware防止csrf攻击
2018/10/09 Python
python多线程共享变量的使用和效率方法
2019/07/16 Python
彻底解决Python包下载慢问题
2020/11/15 Python
HTML5的表单(绝对特别强大的功能)使用示例
2013/06/20 HTML / CSS
蒂芙尼澳大利亚官方网站:Tiffany&Co. Australia
2017/08/27 全球购物
JBL英国官网:JBL UK
2018/07/04 全球购物
俄罗斯设计师家具购物网站:The Furnish
2019/12/01 全球购物
SQL里面如何插入自动增长序列号字段
2012/03/29 面试题
早会主持词
2014/03/17 职场文书
博士导师推荐信
2015/03/25 职场文书
Windows下使用Nginx+Tomcat做负载均衡的完整步骤
2021/03/31 Servers