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 相关文章推荐
某页码显示的helper 少量调整,另附js版
Sep 12 Javascript
JS date对象的减法处理实现代码
Dec 28 Javascript
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
Oct 29 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
Jan 14 Javascript
查询json的数据结构的8种方式简介
Mar 10 Javascript
jQuery实现带水平滑杆的焦点图动画插件
Mar 08 Javascript
JavaScript实现多栏目切换效果
Dec 12 Javascript
Vue.js实战之利用vue-router实现跳转页面
Apr 01 Javascript
JavaScript实现短信倒计时60s
Oct 09 Javascript
详解javascript中var与ES6规范中let、const区别与用法
Jan 11 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
Jul 20 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
Aug 18 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
Javascript - HTML的request类
2007/01/09 Javascript
JQuery触发radio或checkbox的change事件
2012/12/18 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
2014/06/26 Javascript
原生js实现移动端瀑布流式代码示例
2015/12/18 Javascript
jQuery实现获取元素索引值index的方法
2016/09/18 Javascript
jQuery实现限制文本框的输入长度
2017/01/11 Javascript
NodeJS基础API搭建服务器详细过程记录
2017/04/01 NodeJs
在vue项目中引入highcharts图表的方法(详解)
2018/03/05 Javascript
浅析vue中的MVVM实现原理
2019/03/04 Javascript
基于Node.js搭建hexo博客过程详解
2019/06/25 Javascript
JS中的算法与数据结构之集合(Set)实例详解
2019/08/20 Javascript
vue-router的hooks用法详解
2020/06/08 Javascript
JavaScript实现网页留言板功能
2020/11/23 Javascript
Python实现设置windows桌面壁纸代码分享
2015/03/28 Python
pycharm设置注释颜色的方法
2018/05/23 Python
利用Python将数值型特征进行离散化操作的方法
2018/11/06 Python
python 获取键盘输入,同时有超时的功能示例
2018/11/13 Python
Python2与Python3的区别实例总结
2019/04/17 Python
selenium跳过webdriver检测并模拟登录淘宝
2019/06/12 Python
pycharm修改file type方式
2019/11/19 Python
HTML5梦幻之旅——炫丽的流星雨效果实现过程
2013/08/06 HTML / CSS
施华洛世奇波兰官网:SWAROVSKI波兰
2019/06/18 全球购物
芭比波朗加拿大官方网站:Bobbi Brown Cosmetics CA
2020/11/05 全球购物
应届生法律求职信
2013/10/22 职场文书
涉外经济法专业毕业生推荐信
2013/11/24 职场文书
咖啡店的创业计划书,让你hold不住
2014/01/03 职场文书
实习单位接收函模板
2014/01/10 职场文书
财务担保书范文
2014/04/02 职场文书
班级文化标语
2014/06/23 职场文书
公安局负责人查摆问题及整改方案
2014/09/27 职场文书
团员年度个人总结
2015/02/26 职场文书
业务员年终工作总结2015
2015/05/28 职场文书
学籍证明模板
2015/06/18 职场文书
美德少年主要事迹材料
2015/11/04 职场文书
python blinker 信号库
2022/05/04 Python
Oracle中日期的使用方法实例
2022/07/07 Oracle