複数のJavascript setInterval関数を同じページでうまく組み合わせるにはどうすればよいですか？

Question

ループのためにsetInterval()を使用してjQueryプラグインとしていくつかのカスタムアニメーション関数を書きました。

機能はそれ自身で正常に動作するようですが、同じページに複数の機能を組み込もうとすると、タイミングとエフェクトがすべて乱れて正しくレンダリングされません。

私はStackOverflowの上の周りにいくつかのスカウトが行われ、Googleと私が集まることができるものから問題があるしていること、私はページ上の複数あるwindowオブジェクトなどの「グローバル」メソッド/プロパティとしてsetInterval行為彼ら最終的にお互いを上書きする！

これは間違いありませんか？そしてもしそうなら、解決策は何ですか？独自のインターバル機能を管理するためにjQuery /プラグインは何をしていますか？

「ローカル」setIntervalを各プラグインオブジェクトの一意のプロパティとして設定できるかどうかは疑問でしたか？

- OR -

私は1回のグローバルsetInterval呼び出しでそれらすべてを両立させるために、様々な異なるプラグイン/機能からの複数のアニメーションのコールを管理するための関数を作成する必要がある場合 - しかし、私は何をするか見当がつかないこの！

誰でも助けてください。

----編集----

(function($){ 
    $.fn.scroller = function(options) { 

     var defaults = { 
      direction: 'left', 
      distance: '', 
      duration: 2000, 
      interval: 2000, 
      type: 'linear', 
      startPos: '0' 
     }; 
     var options = $.extend(defaults, options); 

     return this.each(function() { 
      parent = $(this).children('.scroller'); 
      $this = parent.children().first(); 

//   console.log(parent); 
//   console.log($this); 

      var o = options; 
      var m = ''; 

      if(o.direction === 'left') m = 'marginLeft'; 
      if(o.direction === 'right') m = 'marginRight'; 
      if(o.direction === 'up') m = 'marginTop'; 
      if(o.direction === 'down') m = 'marginBottom'; 

//   console.log('Distance: ' + o.distance); 
//   console.log('Duration: ' + o.duration); 
//   console.log('Type: ' + o.type); 
//   console.log('Start Pos: ' + o.startPos); 
//   console.log('Interval: ' + o.interval); 

      setInterval(function(){ 
       $this.animate({ 
        m : o.distance 
       }, 
       o.duration, 
       o.type, 
       function() { // OnComplete 
        $this.stop().css(m, o.startPos).appendTo(parent); 
       }); 
      }, o.duration+o.interval); 
     }); 
    }; 
})(jQuery); 

Answer 1

更新

私は問題を見ると思います。 $ thisはグローバル変数として定義します。したがって、setIntervalの呼び出しはすべて同じ$ this変数を使用します。試してくださいvar $this = ...。 parentと同じです。また、$this.animateへのコールバックでは、 "this"はアニメーション化されたdom要素を参照する必要があるので、$（this）を実行してjQueryオブジェクトを取得できます。

---

あなたの問題は、あなたがsetIntervalでコンテキストが緩んでいる可能性があります。 thisオブジェクトが期待どおりに表示されない場合があります。変数が存在すると予想される場合（setIntervalを呼び出す場所の近くに定義されているため）、おそらくそうではありません。

クロージャが役に立ちます。

var myVar = 5; 

ではなく

：あなたのsetIntervalコールバックではなく、グローバルなものでローカルに定義された変数を使用していることを確認してみてください、また

setInterval(function(){ 
    //code here 
}); 

よりもむしろ

setInterval(myPreDefinedFunction); 

をお試しください

myVar = 5; 

if 2番目の方法を使用した場合、コールバック間で変数を共有することになります。

Answer 2

）のsetIntervalがグローバルであることは事実ですが、のsetIntervalへの各呼び出しは（すなわちてclearIntervalのために、あなたはそれを参照するために使用できる一意のIDを返します。 。独自の間隔を必要とする各プラグインには、それを参照するためのIDを含む独自の変数を割り当てる必要があります。おそらく、あなたはこれらを個別にどのように管理しているのかが分かります。私たちに見せるためのコードはありますか？