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 prototype对象的属性说明
Mar 13 Javascript
jQuery中(function(){})()执行顺序的理解
Mar 05 Javascript
JS之Date对象和获取系统当前时间详解
Jan 13 Javascript
2014年最火的Node.JS后端框架推荐
Oct 27 Javascript
JS实现页面超时后自动跳转到登陆页面
Jan 19 Javascript
深入浅析Vue组件开发
Nov 25 Javascript
自学实现angularjs依赖注入
Dec 20 Javascript
vue 实现类似淘宝星级评分的示例
Mar 01 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
layDate日期控件使用方法详解
Nov 15 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
May 27 Javascript
小程序中的箭头函数的具体使用
Jun 19 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
yii2框架中使用下拉菜单的自动搜索yii-widget-select2实例分析
2016/01/09 PHP
QQ邮箱的一个文本编辑器代码
2007/03/14 Javascript
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
2011/03/28 Javascript
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
2011/04/12 Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
2013/05/08 Javascript
js进行表单验证实例分析
2015/02/10 Javascript
javascript常用方法总结
2015/05/14 Javascript
JavaScript 节流函数 Throttle 详解
2016/07/04 Javascript
Bootstrap进度条实现代码解析
2017/03/07 Javascript
js微信应用场景之微信音乐相册案例分享
2017/08/11 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
2018/03/08 Javascript
uniapp电商小程序实现订单30分钟倒计时
2020/11/01 Javascript
vue动态合并单元格并添加小计合计功能示例
2020/11/26 Vue.js
python 3.6 tkinter+urllib+json实现火车车次信息查询功能
2017/12/20 Python
Python读取视频的两种方法(imageio和cv2)
2018/04/15 Python
关于python写入文件自动换行的问题
2018/06/23 Python
scikit-learn线性回归,多元回归,多项式回归的实现
2019/08/29 Python
python使用 __init__初始化操作简单示例
2019/09/26 Python
python3.7实现云之讯、聚合短信平台的短信发送功能
2019/09/26 Python
Numpy之将矩阵拉成向量的实例
2019/11/30 Python
Pytorch 实现数据集自定义读取
2020/01/18 Python
详解Python中的分支和循环结构
2020/02/11 Python
Python开发之身份证验证库id_validator验证身份证号合法性及根据身份证号返回住址年龄等信息
2020/03/20 Python
Clearly新西兰:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
德国电子产品购物网站:TechInTheBasket德国
2018/12/07 全球购物
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
年会活动策划方案
2014/01/23 职场文书
安全大检查实施方案
2014/02/22 职场文书
餐厅采购员岗位职责
2014/03/06 职场文书
2014年国庆节演讲稿精选范文1500字
2014/09/25 职场文书
居委会个人对照检查材料思想汇报
2014/09/29 职场文书
2014年城管工作总结
2014/11/20 职场文书
邀请函模板
2015/02/02 职场文书
个人原因辞职信模板
2015/05/13 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书
MySQL Innodb索引机制详细介绍
2021/11/23 MySQL