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高级程序设计 扩展--关于动态原型
Nov 09 Javascript
javascript 正则表达式相关应介绍
Nov 27 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
Aug 07 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
Nov 21 Javascript
简单理解vue中track-by属性
Oct 26 Javascript
Bootstrap BootstrapDialog使用详解
Feb 17 Javascript
node.js实现登录注册页面
Apr 08 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
Apr 27 Javascript
three.js加载obj模型的实例代码
Nov 10 Javascript
基于JavaScript实现一个简单的Vue
Sep 26 Javascript
vue滚动固定顶部及修改样式的实例代码
May 30 Javascript
vue相同路由跳转强制刷新该路由组件操作
Aug 05 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下实现伪 url 的超简单方法[转]
2007/09/24 PHP
php随机显示图片的简单示例
2014/02/15 PHP
php获取文件大小的方法
2014/02/26 PHP
PHP Hash算法:Times33算法代码实例
2015/05/13 PHP
在PHP中使用FastCGI解析漏洞及修复方案
2015/11/10 PHP
PHP基于yii框架实现生成ICO图标
2015/11/13 PHP
PHP实现清除MySQL死连接的方法
2016/07/23 PHP
你所要知道JS(DHTML)中的一些技巧
2007/01/09 Javascript
javascript div 遮罩层封锁整个页面
2009/07/10 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
2011/04/02 Javascript
js中eval详解
2012/03/30 Javascript
关于JS字符串函数String.replace()
2013/04/07 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
2014/04/18 Javascript
Bootstrap表单Form全面解析
2016/06/13 Javascript
解决nodejs中使用http请求返回值为html时乱码的问题
2017/02/18 NodeJs
小程序tab页无法传递参数的方法
2018/08/03 Javascript
vue-router命名视图的使用讲解
2019/01/19 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
2019/08/27 jQuery
javascript设计模式 ? 备忘录模式原理与用法实例分析
2020/04/21 Javascript
[01:06:19]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第二场 1月8日
2021/03/11 DOTA
python检测lvs real server状态
2014/01/22 Python
Pycharm学习教程(5) Python快捷键相关设置
2017/05/03 Python
使用python爬虫实现网络股票信息爬取的demo
2018/01/05 Python
深入浅析Python2.x和3.x版本的主要区别
2018/11/30 Python
Python实现的统计文章单词次数功能示例
2019/07/08 Python
使用Python快乐学数学Github万星神器Manim简介
2019/08/07 Python
Django中自定义admin Xadmin的实现代码
2019/08/09 Python
TensorFlow 显存使用机制详解
2020/02/03 Python
美国体育用品商店:Paragon Sports
2017/10/08 全球购物
Zipadee-Zip襁褓过渡毯:Sleeping Baby
2018/12/30 全球购物
static函数与普通函数有什么区别
2015/12/25 面试题
导游词之峨眉山
2019/12/16 职场文书
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题
Python 游戏大作炫酷机甲闯关游戏爆肝数千行代码实现案例进阶
2021/10/16 Python
vue实现列表拖拽排序的示例代码
2022/04/08 Vue.js
Mongodb 迁移数据块的流程介绍分析
2022/04/18 MongoDB