js实例教程-JQuery slideshow的一个小问题(如何发现及解决过程)

发布时间:2018-11-25 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了js实例教程-JQuery slideshow的一个小问题(如何发现及解决过程)脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 @H_304_0@

第一阶段,试用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);
});

第一阶段,试用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技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的js实例教程-JQuery slideshow的一个小问题(如何发现及解决过程)全部内容,希望文章能够帮你解决js实例教程-JQuery slideshow的一个小问题(如何发现及解决过程)所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。