快捷導(dǎo)航

JQuery slideshow的一個(gè)小問(wèn)題(如何發(fā)現(xiàn)及解決過(guò)程)

更新時(shí)間：2013年02月06日 10:56:56 作者：

在做一個(gè)網(wǎng)頁(yè)homepage的時(shí)候，想用slideshow［1］做圖片切換效果,在打開頁(yè)面所以的正常測(cè)試都沒問(wèn)題:當(dāng)瀏覽器同時(shí)打開多個(gè)tab，停留他tab中的頁(yè)面一段時(shí)間后，會(huì)出現(xiàn)圖片是最后一張圖片,針對(duì)這個(gè)問(wèn)題，本文給予了詳細(xì)的解決方法，感興趣的朋友可以了解下

第一階段，試用slideshow
在做一個(gè)網(wǎng)頁(yè)homepage的時(shí)候，想用slideshow［1］做圖片切換效果，其中js部分代碼如下:

復(fù)制代碼代碼如下:

 
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); 
}); 

第二階段，發(fā)現(xiàn)問(wèn)題
在打開頁(yè)面所以的正常測(cè)試都沒問(wèn)題，最后領(lǐng)導(dǎo)發(fā)現(xiàn)，當(dāng)瀏覽器同時(shí)打開多個(gè)tab，停留他tab中的頁(yè)面一段時(shí)間后，會(huì)出現(xiàn)圖片是最后一張圖片，然后變化為第一張圖片，剛變化（有淡入的的效果）完成，就突然跳轉(zhuǎn)到最后一張圖片。當(dāng)我改為：

復(fù)制代碼代碼如下:

 
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); 
}); 

發(fā)現(xiàn)停留在其它tab后，回到頁(yè)面時(shí)，圖片顯示的順序正確，間隔時(shí)間也正確，4000毫秒，但是顯示出來(lái)的時(shí)候，是直接跳轉(zhuǎn)式，也不是淡出形狀，似乎animate的1500毫秒沒有啟動(dòng)任何效果。過(guò)一段時(shí)間會(huì)恢復(fù)正常，但是這種現(xiàn)象的時(shí)間長(zhǎng)短，跟停留在別的tab時(shí)間長(zhǎng)短似乎成正比。
第三階段，解決問(wèn)題
最后發(fā)現(xiàn)原因，是因?yàn)閖query的本質(zhì)是單線程［2］，當(dāng)停留在別的tab中，任務(wù)中將next_silde()函數(shù)積壓過(guò)多所致。最后找到的解決方案［4］如下：

復(fù)制代碼代碼如下:

 
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); 
}); 