JQuery スライドショーの小さな問題 (問題の見つけ方と解決方法)_jquery

function next_slide() {
var $active = $('#bitware-overlay img.active ');
if ($active.length == 0)
$active = $('#bitware-overlay img:last'); 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.
};
} 🎜>
第 2 段階、問題の発見

ページを開くときの通常のテストでは問題はありませんでしたが、最終的にリーダーは、ブラウザが複数のタブを同時に開いてページに留まった場合に発見しました。タブ内で一定時間表示されていた画像が最初の画像に切り替わり、変更が完了すると突然最後の画像にジャンプします。




コードをコピー

}
$(function() {
setTimeout("next_slide()", 4000);
});


他のタブに滞在した後、ページに戻ると、画像が正しい順序で表示され、間隔も 4000 ミリ秒になっていることがわかりました。表示されると、それは直接ジャンプであり、形状もフェードしていません。アニメーションの 1500 ミリ秒はまったく効果がないようです。しばらくすると正常に戻りますが、この現象の持続時間は他のタブに費やした時間の長さに正比例するようです。

第 3 段階、問題の解決

最終的に、その理由が jquery の本質がシングルスレッドであるためであることがわかりました[2]。他のタブに滞在すると、 next_silde() 関数が使用されます。タスクが多すぎることが原因です。 [4] で見つかった最終的な解決策は次のとおりです:




コードをコピー

setTimeout("next_slide()", 4000);