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 相关文章推荐
javascript实现一个简单的弹出窗
Feb 22 Javascript
Bootstrap3制作自己的导航栏
May 12 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
Mar 09 Javascript
基于JS实现限时抢购倒计时间表代码
May 09 Javascript
在使用JSON格式处理数据时应该注意的问题小结
May 20 Javascript
vue高德地图之玩转周边
Jun 16 Javascript
JavaScript实现短信倒计时60s
Oct 09 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
Nov 17 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
Dec 27 Javascript
vue自定义指令directive实例详解
Jan 17 Javascript
详解Vue文档中几个易忽视部分的剖析
Mar 24 Javascript
node.js使用express框架进行文件上传详解
Mar 03 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 删除一个目录及目录下的所有文件的函数代码
2010/05/26 PHP
php判断类是否存在函数class_exists用法分析
2014/11/14 PHP
WordPress中用于检索模版的相关PHP函数使用解析
2015/12/15 PHP
PHP命名空间用法实例分析
2019/09/04 PHP
javascript之对系统的toFixed()方法的修正
2007/05/08 Javascript
JavaScript库 开发规则
2009/01/31 Javascript
防止页面被iframe(兼容IE,Firefox火狐)
2010/07/04 Javascript
juqery 学习之四 筛选查找
2010/11/30 Javascript
写js时遇到的一些小问题
2010/12/06 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
2011/10/21 Javascript
js+css实现回到顶部按钮(back to top)
2016/03/02 Javascript
AngularJS 简单应用实例
2016/07/28 Javascript
JS清除字符串中重复值的实现方法
2016/08/03 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
2017/01/18 Javascript
使用canvas进行图像编辑的实例
2017/08/29 Javascript
详解Webpack多环境代码打包的方法
2018/08/03 Javascript
基于vue中keep-alive缓存问题的解决方法
2018/09/21 Javascript
过滤器vue.filters的使用方法实现
2019/09/18 Javascript
python实现搜索指定目录下文件及文件内搜索指定关键词的方法
2015/06/28 Python
python 函数内部修改外部变量的方法
2018/12/18 Python
使用Python实现将list中的每一项的首字母大写
2019/06/11 Python
Ubuntu18.04下python版本完美切换的解决方法
2019/06/14 Python
python常用库之NumPy和sklearn入门
2019/07/11 Python
Pytorch mask_select 函数的用法详解
2020/02/18 Python
Python之Sklearn使用入门教程
2021/02/19 Python
CSS3截取字符串实例代码【推荐】
2018/06/07 HTML / CSS
CSS实现的一闪而过的图片闪光效果
2014/04/23 HTML / CSS
详解通过变换矩阵实现canvas的缩放功能
2019/01/14 HTML / CSS
C语言变量的命名规则都有哪些
2013/12/27 面试题
会计主管岗位职责
2014/01/03 职场文书
1亿有多大教学反思
2014/05/01 职场文书
乡镇党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
县政协领导班子群众路线教育实践活动四风问题整改方案
2014/10/26 职场文书
公司员工辞职信范文
2015/05/12 职场文书
小学生暑假生活总结
2015/07/13 职场文书
音乐课《小猫钓鱼》教学反思
2016/02/18 职场文书