jQueryスライダ - setTimeoutクロスブラウザのグリッチ？

Question

私は、2つの方向ボタンだけでプリロードされた画像のスライダーを作成しようとしました。私が望むやり方でアニメーションを手に入れ、コントロールのアイデアはチュートリアルからのものでした。

（チュートリアル：How to Make Auto-Advancing Slideshows）

だから、私は私のニーズにautoadvanceソリューションを適応し、[OK]を作業のすべてを得ました。しかし、FF（8.0）で実行しようとしたときに少し問題がありました。ボタンをクリックすると、IE（8.0）に問題がない（他のブラウザではテストされていない）間に、プリセットされた3秒後にアニメーションが続く部分を除いて、すべてのことが行われます。

私は間違っていますか？あなたのtimeout変数が間違ったスコープ内にあるように見える、一見

var traker=0; 
$(document).ready(function(){ 
    var numOfImages=4; 
    var timeOut = null; 

    (function autoAdvance(){ 
    $('#fwd').trigger('click',[true]); 
    timeOut = setTimeout(autoAdvance,3000);  
    })(); 

    function preload(imgIndex,numImages){ 
     $("#imgholder1").css('background-image','url("'+imgIndex+'.jpg")'); 
     $("#imgholder2").hide(0); 
     imgIndex < numImages ? imgIndex++ : imgIndex=1 
     $("#imgholder2").css('background-image','url("'+imgIndex+'.jpg")'); 
     traker=imgIndex; 
    } 
    preload(1,numOfImages); 

    function animate(imgIndex,numImages){ 
     $("#imgholder2").fadeIn("slow",function(){ 
      preload(imgIndex,numImages); 
     }); 
    } 

    $("#fwd").bind("click",function(e,simulated){ 
     animate(traker,numOfImages); 
     if(!simulated){ 
      clearTimeout(timeOut); 
      timeOut = setTimeout(autoAdvance,3000); 
     } 
    }); 

    $("#bwd").bind("click",function(){ 
     var temp=traker-2; 
     if(temp == 0){temp=numOfImages;} 
     if(temp == -1){temp=numOfImages-1;} 
     $("#imgholder2").css('background-image','url("'+temp+'.jpg")'); 
     animate(temp,numOfImages); 
     clearTimeout(timeOut); 
     timeOut = setTimeout(autoAdvance,3000); 
    }); 
}); 

Answer 1

修正よりもwindow.setTimeoutを使用する必要があります！

この：

(function autoAdvance(){ 
    $('#fwd').trigger('click',[true]); 
    timeOut = setTimeout(autoAdvance,3000); 
})(); 

は次のようになります。

function autoAdvance(){ 
    $('#fwd').trigger('click',[true]); 
    timeOut = setTimeout(autoAdvance,3000);  
} 
autoAdvance(); 

FFは、そうでない場合は、自己の呼び出し元の関数autoAdvanceを認識しませんでした。

Answer 2

：

HTML部分：

<div id=imgholder1> 
    <div id="imgholder2"></div> 
</div> 
<div id="bwd" class="button"><</div> 
<div id="fwd" class="button">></div> 

jQueryの/ JavaScriptをここで

は、必要なコードです - 機能間で共有されるように、すべての外に宣言します。

var traker=0; 
var timeOut; 

個人的に、私はまた、そのような接近しているの予約方法のキーワードを使用しないよう、これを使用します。

var tmr; 

また、あなたはむしろちょうどsetTimeout