JQuery slideshow的一个小问题(如何发现及解决过程)


Posted in Javascript onFebruary 06, 2013

第一阶段,试用slideshow
在做一个网页homepage的时候,想用slideshow[1]做图片切换效果,其中js部分代码如下:

function next_slide() { 
var $active = $('#bitware-overlay img.active'); 

if ($active.length == 0) 


$active = $('#bitware-overlay img:last'); 

var $next = $active.next().length ? $active.next() : $('#bitware-overlay img:first'); 

$active.addClass('last-active'); 

$next.addClass('active'); 

$next.css({opacity: 0.0}); 

$next.animate({opacity: 1.0}, 1500,function(){ 


$active.removeClass(); 

}); 
} 
$(function() { 

setInterval("next_slide()", 4000); 
});

第二阶段,发现问题
在打开页面所以的正常测试都没问题,最后领导发现,当浏览器同时打开多个tab,停留他tab中的页面一段时间后,会出现图片是最后一张图片,然后变化为第一张图片,刚变化(有淡入的的效果)完成,就突然跳转到最后一张图片。当我改为:
function next_slide() { 
var $active = $('#bitware-overlay img.active'); 

if ($active.length == 0) 


$active = $('#bitware-overlay img:last'); 

var $next = $active.next().length ? $active.next() : $('#bitware-overlay img:first'); 

$active.addClass('last-active'); 

$next.addClass('active'); 

$next.css({opacity: 0.0}); 

$next.animate({opacity: 1.0}, 1500); 

$active.removeClass(); 

setTimeout("next_slide()", 4000); 
} 
$(function() { 

setTimeout("next_slide()", 4000); 
});

发现停留在其它tab后,回到页面时,图片显示的顺序正确,间隔时间也正确,4000毫秒,但是显示出来的时候,是直接跳转式,也不是淡出形状,似乎animate的1500毫秒没有启动任何效果。过一段时间会恢复正常,但是这种现象的时间长短,跟停留在别的tab时间长短似乎成正比。
第三阶段,解决问题
最后发现原因,是因为jquery的本质是单线程[2],当停留在别的tab中,任务中将next_silde()函数积压过多所致。最后找到的解决方案[4]如下:
function next_slide() { 
var $active = $('#bitware-overlay img.active'); 

if ($active.length == 0) 


$active = $('#bitware-overlay img:last'); 

var $next = $active.next().length ? $active.next() : $('#bitware-overlay img:first'); 

$active.addClass('last-active'); 

$next.addClass('active'); 

$next.css({opacity: 0.0}); 

$next.animate({opacity: 1.0}, 1500,function(){ 

$active.removeClass(); 


setTimeout("next_slide()", 4000); 

}); 
} 
$(function() { 

setTimeout("next_slide()", 4000); 
});
Javascript 相关文章推荐
Extjs学习笔记之二 初识Extjs之Form
Jan 07 Javascript
jquery下将选择的checkbox的id组成字符串的方法
Nov 28 Javascript
jquery代码实现多选、不同分享功能
Jul 31 Javascript
jquery trigger函数执行两次的解决方法
Feb 29 Javascript
浅析JavaScript 箭头函数 generator Date JSON
May 23 Javascript
Bootstrap布局方式详解
May 27 Javascript
javascript实现根据汉字获取简拼
Sep 25 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
Jun 30 Javascript
vuejs 单文件组件.vue 文件的使用
Jul 28 Javascript
vue引入jq插件的实例讲解
Sep 12 Javascript
《javascript少儿编程》location术语总结
May 27 Javascript
JavaScript中的连续赋值问题实例分析
Jul 12 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
Sep 12 #Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
Feb 05 #Javascript
JQuery入门——用映射方式绑定不同事件应用示例
Feb 05 #Javascript
JQuery入门——事件切换之hover()方法应用介绍
Feb 05 #Javascript
JQuery入门——事件切换之toggle()方法应用介绍
Feb 05 #Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
Feb 05 #Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
Feb 05 #Javascript
You might like
php批量上传的实现代码
2013/06/09 PHP
函数中使用require_once问题深入探讨 优雅的配置文件定义方法推荐
2014/07/02 PHP
ThinkPHP登录功能的实现方法
2014/08/20 PHP
php使用curl通过代理获取数据的实现方法
2016/05/16 PHP
phpStudy2016 配置多个域名期间遇到的问题小结
2017/10/19 PHP
PHP 断点续传实例详解
2017/11/11 PHP
js中几种去掉字串左右空格的方法
2006/12/25 Javascript
javascript的对话框详解与参数
2007/03/08 Javascript
jQuery+ajax实现顶一下,踩一下效果
2010/07/17 Javascript
利用NodeJS和PhantomJS抓取网站页面信息以及网站截图
2013/11/18 NodeJs
jquery实现公告翻滚效果
2015/02/27 Javascript
JS动态显示表格上下frame的方法
2015/03/31 Javascript
JavaScript的this关键字的理解
2016/06/18 Javascript
js中setTimeout的妙用--防止循环超时
2017/03/06 Javascript
深入理解vue中的$set
2017/06/01 Javascript
详解使用PM2管理nodejs进程
2017/10/24 NodeJs
JS中数组与对象的遍历方法实例小结
2018/08/14 Javascript
angularJs利用$scope处理升降序的方法
2018/10/08 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
使用Vue实现一个树组件的示例
2020/11/06 Javascript
[01:33:25]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第一场 1月24日
2021/03/11 DOTA
用TensorFlow实现lasso回归和岭回归算法的示例
2018/05/02 Python
Selenium 模拟浏览器动态加载页面的实现方法
2018/05/16 Python
解决pycharm的Python console不能调试当前程序的问题
2019/01/20 Python
python 利用zmail库发送邮件
2020/09/11 Python
css3中background新增的4个新的相关属性用法介绍
2013/09/26 HTML / CSS
KTV的创业计划书范文
2014/02/02 职场文书
班主任寄语大全
2014/04/04 职场文书
三八妇女节演讲稿
2014/05/27 职场文书
师范生自荐信模板
2014/05/28 职场文书
企业宣传口号
2014/06/12 职场文书
2014年小学重阳节活动策划方案
2014/09/16 职场文书
英文道歉信
2015/01/20 职场文书
心得体会该怎么写呢?
2019/06/27 职场文书
python通配符之glob模块的使用详解
2021/04/24 Python
MYSQL 运算符总结
2021/11/11 MySQL