对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判断浏览器的内核
Aug 17 Javascript
JavaScript的removeChild()函数用法详解
Dec 27 Javascript
浅析Javascript匿名函数与自执行函数
Feb 06 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
Dec 08 Javascript
Easyui使用Dialog行内按钮布局的实例
Jul 27 Javascript
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
通过函数作用域和块级作用域看javascript的作用域链
Aug 05 Javascript
angularjs性能优化的方法
Sep 05 Javascript
JS实现可视化文件上传
Sep 08 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
JS实现贪吃蛇游戏
Nov 15 Javascript
JavaScript WeakMap使用详解
Feb 05 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
PHP 编写大型网站问题集
2010/05/07 PHP
Yii Framework框架获取分类下面的所有子类方法
2014/06/20 PHP
PHP+jquery实时显示网站在线人数的方法
2015/01/04 PHP
PHP针对字符串开头和结尾的判断方法
2016/07/11 PHP
Yii+upload实现AJAX上传图片的方法
2016/07/13 PHP
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
DOM相关内容速查手册
2007/02/07 Javascript
JavaScript CSS菜单功能 改进版
2008/12/20 Javascript
js获取提交的字符串的字节数
2009/02/09 Javascript
模拟jQuery ajax服务器端与客户端通信的代码
2011/03/28 Javascript
javascript数组的使用
2013/03/28 Javascript
鼠标移到图片上变大显示而不是放大镜效果
2014/06/15 Javascript
jQuery拖拽插件gridster使用指南
2015/04/21 Javascript
分享几种比较简单实用的JavaScript tabel切换
2015/12/31 Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
2020/03/26 Javascript
webpack dll打包重复问题优化的解决
2018/10/10 Javascript
axios如何取消重复无用的请求详解
2019/12/15 Javascript
jQuery实现穿梭框效果
2021/01/19 jQuery
[02:31]《DAC最前线》之选手酒店现场花絮
2015/01/30 DOTA
python中getattr函数使用方法 getattr实现工厂模式
2014/01/20 Python
Python加pyGame实现的简单拼图游戏实例
2015/05/15 Python
浅析Python中MySQLdb的事务处理功能
2016/09/21 Python
django之session与分页(实例讲解)
2017/11/13 Python
python读取excel指定列数据并写入到新的excel方法
2018/07/10 Python
Python异常处理操作实例详解
2018/08/28 Python
Python中GIL的使用详解
2018/10/03 Python
Python基础之变量基本用法与进阶详解
2020/01/03 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
Django+boostrap 美化admin后台的操作
2020/03/11 Python
Pycharm安装并配置jupyter notebook的实现
2020/05/18 Python
pandas针对excel处理的实现
2021/01/15 Python
详解如何在css3打包后自动追加前缀插件:autoprefixer
2018/12/18 HTML / CSS
Larsson & Jennings官网:现代瑞士钟表匠
2018/03/20 全球购物
Martinelli官方商店:西班牙皮鞋和高跟鞋品牌
2019/07/30 全球购物
英国买鞋网站:Charles Clinkard
2019/11/14 全球购物
幼儿园儿童节主持词
2014/03/21 职场文书