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知识点收藏
Feb 22 Javascript
JS 常用校验函数
Mar 26 Javascript
javascript OFFICE控件测试代码
Dec 08 Javascript
input禁止键盘及中文输入,但可以点击
Feb 13 Javascript
javascript背景时钟实现方法
Jun 18 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 Javascript
Bootstrap Modal遮罩弹出层代码分享
Nov 21 Javascript
浅析javascript中的Event事件
Dec 09 Javascript
js Canvas绘制圆形时钟效果
Feb 17 Javascript
JSONP基础知识详解
Mar 19 Javascript
JS获取短信验证码倒计时的实现代码
May 22 Javascript
微信小程序Echarts图表组件使用方法详解
Jun 25 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函数篇之掌握ord()与chr()函数应用
2011/12/05 PHP
php获取本周星期一具体日期的方法
2015/04/20 PHP
PHP通过API获取手机号码归属地
2015/05/28 PHP
在WordPress中获取数据库字段内容和添加主题设置菜单
2016/01/11 PHP
深入解析PHP的Yii框架中的缓存功能
2016/03/29 PHP
JS文本框默认值处理详解
2013/07/10 Javascript
浅谈JavaScript中null和undefined
2015/07/09 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
2016/10/10 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
2017/06/11 jQuery
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
2018/02/08 Javascript
vue better scroll 无法滚动的解决方法
2018/06/07 Javascript
基于vue手写tree插件的那点事儿
2019/08/20 Javascript
layui lay-verify form表单自定义验证规则详解
2019/09/18 Javascript
vue+element导航栏高亮显示的解决方式
2019/11/12 Javascript
解决Antd Table表头加Icon和气泡提示的坑
2020/11/17 Javascript
[07:57]DOTA2热力大趴狂欢夜 广州站活动回顾
2013/11/27 DOTA
python实现黑客字幕雨效果
2018/06/21 Python
Python判断中文字符串是否相等的实例
2018/07/06 Python
Windows下安装Scrapy
2018/10/17 Python
python2.7的flask框架之引用js&css等静态文件的实现方法
2019/08/22 Python
PyCharm Community安装与配置的详细教程
2020/11/24 Python
Django视图类型总结
2021/02/17 Python
奥斯汀独木舟和皮划艇:Austin Canoe & Kayak
2018/05/22 全球购物
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
大学生党课思想汇报
2013/12/29 职场文书
电子专业求职信
2014/06/19 职场文书
公司法人授权委托书范本
2014/09/12 职场文书
2014年个人售房协议书
2014/10/30 职场文书
党员干部学法用法心得体会
2016/01/21 职场文书
Keras多线程机制与flask多线程冲突的解决方案
2021/05/28 Python
mysql外连接与内连接查询的不同之处
2021/06/03 MySQL
解析MySQL binlog
2021/06/11 MySQL
MySQL query_cache_type 参数与使用详解
2021/07/01 MySQL
Mysql中where与on的区别及何时使用详析
2021/08/04 MySQL