DIV CSS 佈局教程網

第一階段，試用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);
});