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 相关文章推荐
北京奥运官方网站幻灯切换效果flash版打包下载
Jan 30 Javascript
js跨域问题之跨域iframe自适应大小实现代码
Jul 17 Javascript
javascript window.confirm确认 取消对话框实现代码小结
Oct 21 Javascript
浅谈javascript中for in 和 for each in的区别
Apr 23 Javascript
js省市县三级联动效果实例
Apr 15 Javascript
Angular实现预加载延迟模块的示例
Oct 12 Javascript
js 两个日期比较相差多少天的实例
Oct 19 Javascript
关于angularJs清除浏览器缓存的方法
Nov 28 Javascript
如何利用ES6进行Promise封装总结
Feb 11 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
Antd的table组件表格的序号自增操作
Oct 27 Javascript
vue3.0 项目搭建和使用流程
Mar 04 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
CodeIgniter图像处理类的深入解析
2013/06/17 PHP
PHP抓取网页、解析HTML常用的方法总结
2015/07/01 PHP
PHP7.0版本备注
2015/07/23 PHP
PHP统计当前在线用户数实例讲解
2015/10/21 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
再论Javascript的类继承
2011/03/05 Javascript
jquery选择器的选择使用及性能介绍
2013/01/16 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
2013/11/15 Javascript
html的DOM中Event对象onabort事件用法实例
2015/01/21 Javascript
jquery ajax 如何向jsp提交表单数据
2015/08/23 Javascript
基于Bootstrap重置输入框内容按钮插件
2016/05/12 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
2016/08/29 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
2017/06/11 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
2017/06/25 Javascript
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
微信小程序 搜索框组件代码实例
2019/09/06 Javascript
解决vue.js提交数组时出现数组下标的问题
2019/11/05 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
[12:51]71泪洒现场!是DOTA2让经典重现
2014/03/24 DOTA
[00:42]《辉夜杯》—职业组预选赛12月3日15点 正式打响
2015/12/03 DOTA
Python+树莓派+YOLO打造一款人工智能照相机
2018/01/02 Python
Python3用tkinter和PIL实现看图工具
2018/06/21 Python
对tf.reduce_sum tensorflow维度上的操作详解
2018/07/26 Python
Python Selenium 设置元素等待的三种方式
2020/03/18 Python
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
2012/11/22 HTML / CSS
瑞典灯具和照明网上商店:Lamp24.se
2018/03/17 全球购物
高性能钓鱼服装:Huk Gear
2019/02/20 全球购物
《湘夫人》教学反思
2014/02/21 职场文书
酒店总经理职务说明书
2014/02/26 职场文书
cf战队收人口号
2014/06/21 职场文书
幼儿园教师工作总结2015
2015/04/02 职场文书
困难补助申请报告
2015/05/19 职场文书
挂职锻炼工作总结2015
2015/05/28 职场文书
员工规章制度范本
2015/08/07 职场文书
干货:如何写好观后感 !
2019/05/21 职场文书