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 相关文章推荐
jquery $.ajax各个事件执行顺序
Oct 15 Javascript
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
Feb 25 Javascript
关于html+ashx开发中几个问题的解决方法
Jul 18 Javascript
超简单JS二级、多级联动的简单实例
Feb 18 Javascript
DOM 事件流详解
Jan 20 Javascript
Javascript编写俄罗斯方块思路及实例
Jul 07 Javascript
Node.js编写组件的三种实现方式
Feb 25 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
Jun 02 Javascript
vue登录路由验证的实现
Dec 13 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
Mar 05 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
May 01 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
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银联网页支付实现方法
2015/03/04 PHP
php mailer类调用远程SMTP服务器发送邮件实现方法
2016/03/04 PHP
PHP的Yii框架中使用数据库的配置和SQL操作实例教程
2016/03/17 PHP
FleaPHP框架数据库查询条件($conditions)写法总结
2016/03/19 PHP
thinkphp在低版本Nginx 下支持PATHINFO的方法分享
2016/05/27 PHP
Nigma vs AM BO3 第二场2.13
2021/03/10 DOTA
一些易混淆且不常用的属性,希望有用
2007/01/29 Javascript
javascript while语句和do while语句的区别分析
2007/12/08 Javascript
js 日期转换成中文格式的函数
2009/07/07 Javascript
YUI Compressor压缩JavaScript原理及微优化
2013/01/07 Javascript
js改变img标签的src属性在IE下没反应的解决方法
2013/07/23 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
2014/09/06 Javascript
PHP守护进程实例
2015/03/06 Javascript
JavaScript中实现Map的示例代码
2015/09/09 Javascript
浅谈js中对象的使用
2016/08/11 Javascript
使用ThinkJs搭建微信中控服务的实现方法
2019/08/08 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
2019/08/16 Javascript
JS实现躲避粒子小游戏
2020/06/18 Javascript
解决py2exe打包后,总是多显示一个DOS黑色窗口的问题
2019/06/21 Python
python如何实现数据的线性拟合
2019/07/19 Python
python处理RSTP视频流过程解析
2020/01/11 Python
Python figure参数及subplot子图绘制代码
2020/04/18 Python
Python3.7安装pyaudio教程解析
2020/07/24 Python
从零开始的TensorFlow+VScode开发环境搭建的步骤(图文)
2020/08/31 Python
Expedia挪威官网:酒店、机票和租车
2018/03/03 全球购物
俄罗斯卫浴采暖及维修用品超级市场:Dkrussia
2020/05/12 全球购物
Zatchels官网:英国剑桥包品牌
2021/01/12 全球购物
英语师范专业毕业生自荐信
2013/09/21 职场文书
应届毕业生求职自荐书
2014/01/03 职场文书
写给学生的新学期寄语
2014/01/18 职场文书
临床护士自荐信
2014/01/31 职场文书
初二学习计划书范文
2014/04/27 职场文书
雷锋式好少年事迹材料
2014/08/17 职场文书
护士辞职信怎么写
2015/02/27 职场文书
停电放假通知
2015/04/14 职场文书
python运行脚本文件的三种方法实例
2022/06/25 Python