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 相关文章推荐
jQuery EasyUI 中文API Button使用实例
Apr 14 Javascript
jQuery getJSON 处理json数据的代码
Jul 26 Javascript
js中array的sort()方法使用介绍
Feb 20 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
Mar 24 Javascript
jquery实现百叶窗效果
Jan 12 Javascript
jQuery模拟窗口抖动效果
Mar 15 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
Apr 17 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
Jun 19 Javascript
vue $set 给数据赋值的实例
Nov 09 Javascript
基于jQuery实现可编辑的表格
Dec 11 jQuery
javascript canvas API内容整理
Feb 16 Javascript
js判断两个数组相等的5种方法
May 06 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
eAccelerator的安装与使用详解
2013/06/13 PHP
PHP进程通信基础之信号量与共享内存通信
2017/02/19 PHP
php实现简单加入购物车功能
2017/03/07 PHP
PHP实现简易计算器功能
2020/08/28 PHP
php 函数中静态变量使用的问题实例分析
2020/03/05 PHP
php回调函数处理数组操作示例
2020/04/13 PHP
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
2009/09/09 Javascript
JQUBAR1.1 jQuery 柱状图插件发布
2010/11/28 Javascript
jQuery EasyUI API 中文文档 - ValidateBox验证框
2011/10/06 Javascript
javascript函数作用域学习示例(js作用域)
2014/01/13 Javascript
JavaScript仿支付宝密码输入框
2015/12/29 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
2016/02/17 Javascript
JavaScript继承学习笔记【新手必看】
2016/05/10 Javascript
用AngularJS的指令实现tabs切换效果
2016/08/31 Javascript
详解Jquery的事件操作和文档操作
2016/12/19 Javascript
微信小程序 POST请求的实例详解
2017/09/29 Javascript
基于JavaScript实现抽奖系统
2018/01/16 Javascript
浅谈VUE监听窗口变化事件的问题
2018/02/24 Javascript
nodejs通过钉钉群机器人推送消息的实现代码
2019/05/05 NodeJs
微信小程序实现下拉加载更多商品
2020/12/29 Javascript
[01:50]WODOTA制作 DOTA2中文宣传片《HERO》
2013/04/28 DOTA
Python中的并发处理之asyncio包使用的详解
2018/04/03 Python
无法使用pip命令安装python第三方库的原因及解决方法
2018/06/12 Python
python远程连接服务器MySQL数据库
2018/07/02 Python
使用pandas read_table读取csv文件的方法
2018/07/04 Python
对python中if语句的真假判断实例详解
2019/02/18 Python
Python中的 ansible 动态Inventory 脚本
2020/01/19 Python
python脚本第一行如何写
2020/08/30 Python
很酷的小工具和电子产品商城:GearBest
2016/11/19 全球购物
大学生自我评价范文分享
2014/02/21 职场文书
交通安全寄语大全
2014/04/08 职场文书
捐助倡议书范文
2014/04/15 职场文书
《社戏》教学反思
2014/04/15 职场文书
2015学生会文艺部工作总结
2015/04/03 职场文书
一封真诚的自荐信帮你赢得机会
2019/05/07 职场文书
交互式可视化js库gojs使用介绍及技巧
2022/02/18 Javascript