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 相关文章推荐
兼容IE与firefox火狐的回车事件(js与jquery)
Oct 20 Javascript
如何解决Jquery库及其他库之间的$命名冲突
Sep 15 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
Jun 07 Javascript
Bootstrap源码解读下拉菜单(4)
Dec 23 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
Jul 09 Javascript
JavaScript实现求最大公共子串的方法
Feb 03 Javascript
详解vue 单页应用(spa)前端路由实现原理
Apr 04 Javascript
JavaScript的Object.defineProperty详解
Jul 09 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
Sep 19 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
Jun 07 Javascript
vue实现分页栏效果
Jun 28 Javascript
详解JavaScript 中的批处理和缓存
Nov 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
PHP 常见郁闷问题答解
2006/11/25 PHP
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
2010/01/15 Javascript
JS中Date日期函数中的参数使用介绍
2014/01/02 Javascript
JS实现关键字搜索时的相关下拉字段效果
2014/08/05 Javascript
使用jquery+CSS实现控制打印样式
2014/12/31 Javascript
被遗忘的javascript的slice() 方法
2015/04/20 Javascript
js判断子窗体是否关闭的方法
2015/08/11 Javascript
JavaScript操作HTML DOM节点的基础教程
2016/03/11 Javascript
一分钟理解js闭包
2016/05/04 Javascript
animate 实现滑动切换效果【实例代码】
2016/05/05 Javascript
用js写的一个路由(简单实例)
2016/09/24 Javascript
浅谈jquery中next与siblings的区别
2016/10/27 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
2017/04/01 Javascript
解析NodeJS异步I/O的实现
2017/04/13 NodeJs
node.js 中间件express-session使用详解
2017/05/20 Javascript
easyui-datagrid开发实践(总结)
2017/08/02 Javascript
npm scripts 使用指南详解
2018/10/08 Javascript
微信小程序实现两个页面传值的方法分析
2018/12/11 Javascript
js实现数字从零慢慢增加到指定数字示例
2019/11/07 Javascript
JS实现网站吸顶条
2020/01/08 Javascript
js仿淘宝放大镜效果
2020/12/28 Javascript
[01:08]DOTA2次级职业联赛 - Wings 战队宣传片
2014/12/01 DOTA
Python中用Ctrl+C终止多线程程序的问题解决
2013/03/30 Python
对python for 文件指定行读写操作详解
2018/12/29 Python
Python批量生成特定尺寸图片及图画任意文字的实例
2019/01/30 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
Python classmethod装饰器原理及用法解析
2020/10/17 Python
python 怎样进行内存管理
2020/11/10 Python
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
2013/01/09 HTML / CSS
SmartBuyGlasses中国:唯视良品(销售名牌太阳镜、墨镜和眼镜框)
2017/07/03 全球购物
社区庆八一活动方案
2014/02/02 职场文书
团委书记的竞聘演讲稿
2014/04/24 职场文书
公司副总经理任命书
2014/06/05 职场文书
高一地理教学工作总结
2015/08/12 职场文书
MySQL里面的子查询的基本使用
2021/08/02 MySQL
Python中 range | np.arange | np.linspace三者的区别
2022/03/22 Python