2016-08-04 9 views
0

私は自分のスライダーコードに問題があるのsetInterval。のsetInterval、そしててclearIntervalは、再度

ここで私は(より多くの要素、それはスライドするはず回以上)がありますどのように多くの要素に基づいて、スライダーをアニメーション化する機能を定義します。

ここ
var animateSlider = function() { 

     var howManyTimes = Math.ceil(newContainerWidth/parentWidth)-1; 


     var repeatSlider = function() { 
      howManyTimes = Math.ceil(newContainerWidth/parentWidth)-1; 
      for (i=0;i<howManyTimes;i++) { 
      // looped code 
      $(".portfolio-slider").delay(2000).animate({ 
         marginLeft: - (slideDistance * (i+1)) 
        }, 500); 

      console.log(howManyTimes); 
     } 
     $(".portfolio-slider").delay(2000).animate({ 
         marginLeft: 0 
        }, 500); 
    } 

    // and this is where I set the interval for sliding: 

    var intervalId; 
    var intervalId = function() { 
     setInterval(repeatSlider,howManyTimes * 500); 
    } 
    intervalId(); 

    // here's where I tried putting: 
    // clearInterval(intervalId) 
    // just to see if it clears it, but it didn't, the code interval just kept on replaying. 

    } 

自動再生に設定されている場合、私はスライダーを開始真:

// fires the slider if autoplay option is set to true 
    if (autoplay) { 
    animateSlider(); 
     } 

そして、ここでは、私は「.filter」クラスを持つボタンをクリックしたときに何が起こるかだ - それは(それが動作し、それは私が集中したいものではありませんように、コードは削除)の要素をフィルタリングし、その後は開始animateSlider関数を使用して、要素の数とその数を再計算できますそれがスライドするはずの任意の回:

 $('.filter').click(function(){ 
     // it does some stuff and then animates the slider again so it recalculates the widths and number of times it's supposed to slide: 

     animateSlider(); 
    }); 

問題は、私はそれが機能を再起動しないと思うということである代わりに、それは何度も何度もそれを起動し、それがスライダーをスライドしなければならない回数を再計算しません(そう要素をフィルタリングすると、空のスライドと要素を持つスライドがスライドされます)。

私はてclearInterval()関数を認識してんだけど、私は成功せずのsetIntervalの下に入れて試してみました。間隔が停止し、新しい幅と要素数(代わりに停止することなく、何回も発射)を再起動し、「.filter」をクリックした後、スライダーのスライド、 -

理想的な行動がなければなりません。

それは私がこの問題に対処しようとしている二日目だ、私はいくつかの助けを本当に感謝します。

+1

間隔を使用することはありません、あなたがてclearIntervalを使用したい場合は、あなたがそれに参照を保持する必要が自分自身に – ZiTAL

+1

を呼び出すのsetTimeoutを使用する、すなわちVAR 'のようなもの:あなたはこれを行うことができますあなたは 'clearInterval(intervalTimer)' aftewardsを使用することができます –

+0

しかし、私はここで何をしましたか? VAR INTERVALID =関数(){ たsetInterval(repeatSlider、howManyTimes * 500)。 } intervalId(); 後で私はclearInterval(intervalId)を試みましたが、動作しませんでした。コンソールにエラーはありません。 – oneday

答えて

0

ウィルジェンキンスが言ったように、あなたが作成したインターバル機能の参照を取得したsetInterval()を返す必要があります。あなたのラッパー関数は何も返しません。

var intervalId = function() { 
    return setInterval(repeatSlider,howManyTimes * 500); 
} 

または

var intervalId = setInterval(repeatSlider,howManyTimes * 500); 
+0

'に機能を割り当てているやっている: VAR INTERVALID =機能(){ \t \tリターンのsetInterval(repeatSlider、howManyTimes * 500); \t \t} \t \t intervalId(); \t \t clearInterval(intervalId); それはあなたが意味するものですか?インターバルは実行されますが、それでもクリアされません。 – oneday

+0

私は、intervalId()の戻り値を別のvarに保存する必要があると思います: 'var id = intervalId(); clearInterval(id); ' – Sahid

関連する問題