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 showModalDialog 多层模态窗口实现页面提交及刷新的代码
Nov 28 Javascript
JS 跳转页面延迟2种方法
Mar 29 Javascript
jQuery动态设置form表单的enctype值(实现代码)
Jul 04 Javascript
如何让DIV可编辑、可拖动示例代码
Sep 18 Javascript
jquery单行文字向上滚动效果示例
Mar 06 Javascript
JS+CSS实现电子商务网站导航模板效果代码
Sep 10 Javascript
开启Javascript中apply、call、bind的用法之旅模式
Oct 28 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
Dec 29 Javascript
vue+element的表格实现批量删除功能示例代码
Aug 17 Javascript
react.js组件实现拖拽复制和可排序的示例代码
Aug 20 Javascript
详解Vue项目部署遇到的问题及解决方案
Jan 11 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
Nov 29 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
ThinkPHP php 框架学习笔记
2009/10/30 PHP
收集的二十一个实用便利的PHP函数代码
2010/04/22 PHP
php使用base64加密解密图片示例分享
2014/01/20 PHP
兼容各大浏览器带关闭按钮的漂浮多组图片广告代码
2014/06/05 PHP
PHP往XML中添加节点的方法
2015/03/12 PHP
thinkphp隐藏index.php/home并允许访问其他模块的实现方法
2016/10/13 PHP
PHP进阶学习之依赖注入与Ioc容器详解
2019/06/19 PHP
推荐dojo学习笔记
2007/03/24 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
2013/01/09 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
2013/01/25 Javascript
JavaScript全排列的六种算法 具体实现
2013/06/29 Javascript
jquery+css实现动感的图片切换效果
2015/11/25 Javascript
编写高质量JavaScript代码的基本要点
2016/03/02 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
2016/08/01 Javascript
AngularJS基础 ng-focus 指令简单示例
2016/08/01 Javascript
JS中setTimeout和setInterval的最大延时值详解
2017/02/13 Javascript
深入理解react-router@4.0 使用和源码解析
2017/05/23 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
2018/01/31 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
2019/12/06 Javascript
js实现点击烟花特效
2020/10/14 Javascript
解决vant中 tab栏遇到的坑 van-tabs
2020/11/04 Javascript
[04:03]辉夜杯主赛事 12月25日RECAP精彩回顾
2015/12/26 DOTA
Python中使用scapy模拟数据包实现arp攻击、dns放大攻击例子
2014/10/23 Python
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
Python DataFrame.groupby()聚合函数,分组级运算
2018/09/18 Python
Python aiohttp百万并发极限测试实例分析
2019/10/26 Python
django queryset 去重 .distinct()说明
2020/05/19 Python
pyecharts在数据可视化中的应用详解
2020/06/08 Python
python中time.ctime()实例用法
2021/02/03 Python
欧姆龙医疗保健与医疗产品:Omron Healthcare
2020/02/10 全球购物
C#中有没有运算符重载?能否使用指针?
2014/05/05 面试题
微观物理专业自荐信
2014/01/26 职场文书
将相和教学反思
2014/02/04 职场文书
红白喜事主持词
2015/07/06 职场文书
感谢信的技巧及范例
2019/05/15 职场文书
《家世》读后感:看家训的力量
2019/12/30 职场文书