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 组件之旅(四):测试 JavaScript 组件
Oct 28 Javascript
javascript中的undefined 与 null 的区别  补充篇
Mar 17 Javascript
判断客户端浏览器是否安装了Flash插件的多种方法
Aug 11 Javascript
js更优雅的兼容
Aug 12 Javascript
JavaScript学习历程和心得小结
Aug 16 Javascript
JS加jquery简单实现标签元素的显示或隐藏
Sep 23 Javascript
js拆分字符串并将分割的数据放到数组中的方法
May 06 Javascript
js实现的早期滑动门菜单效果代码
Aug 27 Javascript
JQuery+EasyUI轻松实现步骤条效果
Feb 22 Javascript
详解AngularJS2 Http服务
Jun 26 Javascript
vue实现移动端input上传视频、音频
Aug 18 Javascript
解决vue项目本地启动时无法携带cookie的问题
Feb 06 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的性能
2013/10/30 PHP
PHP自定义函数获取汉字首字母的方法
2016/12/01 PHP
[推荐]javascript 面向对象技术基础教程
2009/03/03 Javascript
让人印象深刻的10个jQuery手风琴效果应用
2012/05/08 Javascript
浏览器窗口加载和大小改变事件示例
2014/02/27 Javascript
jQuery()方法的第二个参数详解
2015/04/29 Javascript
jQuery实现宽屏图片轮播实例教程
2015/11/24 Javascript
jquery实现一个简单的表单验证实例
2016/03/30 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
2016/07/08 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
2016/08/03 Javascript
如何提高Dom访问速度
2017/01/05 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
2017/01/14 Javascript
jQuery.ajax向后台传递数组问题的解决方法
2017/05/12 jQuery
vue侧边栏动态生成下级菜单的方法
2018/09/07 Javascript
JavaScript手写数组的常用函数总结
2020/11/22 Javascript
[03:02]安得倚天剑,跨海斩长鲸——中国军团出征DOTA2国际邀请赛
2018/08/14 DOTA
有关Python的22个编程技巧
2018/08/29 Python
详解python3 + Scrapy爬虫学习之创建项目
2019/04/12 Python
Django错误:TypeError at / 'bool' object is not callable解决
2019/08/16 Python
python批量替换文件名中的共同字符实例
2020/03/05 Python
浅谈python3打包与拆包在函数的应用详解
2020/05/02 Python
Python定时任务框架APScheduler原理及常用代码
2020/10/05 Python
举例讲解Python装饰器
2020/12/24 Python
基于DOM+CSS3实现OrgChart组织结构图插件
2016/03/02 HTML / CSS
HTML5所有标签汇总及标签意义解释
2015/03/12 HTML / CSS
BNKR中国官网:带你感受澳洲领先潮流时尚
2018/08/21 全球购物
应聘美工求职信
2013/11/07 职场文书
高级电工工作职责
2013/11/21 职场文书
读书活动实施方案
2014/03/10 职场文书
生物制药专业求职信
2014/03/11 职场文书
报关报检委托书
2014/04/08 职场文书
信访工作经验交流材料
2014/05/23 职场文书
撤诉申请怎么写
2015/05/19 职场文书
幼儿园毕业致辞
2015/07/29 职场文书
篮球拉拉队口号
2015/12/25 职场文书
详解在OpenCV中如何使用图像像素
2022/03/03 Python