はJavascriptを、Protoypeオブジェクト、jQueryの、およびタイマーの

Question

私はタイプ補正を通じて金曜日にこれを修正したと思ったが、私は（私はこの問題の解決策を見つけようと、私の頭を叩いてきた

を:(ませんでした。持っていたことにする1）がある場合、セットアップをたぶん私は正しいことを探していないんだけど、私はこの1つだけの解決策を見つけることができません...

：

$.myPlugin = function(element, options){ 
    this.myElement = $(element); 
    this.myElement.data('rotator', ''); 
    this.myElement.data('settings', $.extend({}, $.myPlugin.defaultOptions, options)); 
    this.mainFunction(this.myElement); 
}; 

$.myPlugin.defaultOptions = { // yadda yadda }; 


$.myPlugin.prototype = { 
    mainFunction : function(myself){ 
     // establish initial parameters 
     var TEST = Math.rand(); 

     // do a bunch of stuff 
     $(myButton).live('click', function(){    
      alert(TEST) //<---FOR TESTING PURPOSES 

      // do other things 
      myself.data('rotator', setTimeout(function(){    
       // click button after x period 
       myButton.click(); 
      }, x));  
     }); 
    }, 

    destroy : function(){ 
     myself = $(this); 
     myself.myElement.removeData('settings'); 
     clearTimeout(myself.data('rotator')); 
    } 
}; 

$.fn.myPlugin = function(options) { 
    // parse options 
    this.each(function(){ 
     var instance = $(this).data('myPlugin'); 

     // blah blah blah ... on create 
     $(this).data('myPlugin', new $.myPlugin(this, args)); 

     // blah blah blah ... on destroy 
     instance['destroy'].apply(this); 
     $(this).data('ddGallery', null); 
    }; 
    return this; 
}; 

希望する機能：

私のロジックでは、要素にオブジェクトを作成したいと思います。次に、プラグインは要素の内容を変数に格納し、新しい内容をその変数に格納します。 .live（）クリックリスナーを使用して、クリック時に呼び出される自動タイミングイベントがあります。 clickイベントはタイマーをリセットしてループを発生させます（setIntervalを使用するのではなく）。破壊時に、私は保存されたオリジナルのHTMLコンテンツを置き換え、はにオブジェクトを殺したいと思っています。これまでのところ、これはすべて動作します。私はその後、要素上のオブジェクトを再現できるようにしたいと考えています（恐らく異なる設定で渡す）。

すべてがうまくいかないところです：

私は破壊した後、同じ要素上のオブジェクトを再作成すると、オリジナルのタイマーは引き続き実行されます。 私はstinkinのタイマーを取り除くことができない、と私は私の髪をリッピングしようとしている！

テストするには、初期化時に乱数を設定し、その数値をクリックすると警告します。最初は、たとえば「0.1234」のアラートが表示されることがあります。私はオブジェクトを破壊することができます（私はフォームボタン上のリスナーを使って作成して破壊しています）。この要素は元の状態に戻り、無限に座って楽しく座ります。ただし、エレメント上のプラグインをもう一度実行すると、元の "0.12345"アラートがすぐにポップアップし、遅延が発生しません（すべてのアニメーションが起動します）。それに続いて別の新しいポップアップ、たとえば「0.5678」が続きます。どちらのタイマーも要素上で発砲し続け、混乱を引き起こします。

私には何が欠けていますか？

Answer 1

あなたのdestroyメソッド内のボタンの上にオリジナルのクリックイベントのバインドを解除されていません。明確には次のようになります

$(this).data('rotator', setTimeout(... 

対

this.rotator = setTimeout(... 

を試してみてください。あなたの破壊メソッドで

myself.die('click'); 

のような呼び出しを追加する必要があります。将来のクリックで警告される元の乱数が表示されている理由は、最初にクリックイベントにクロージャーをバインドしたためです。タイマーを終了しますが、クリックハンドラをアンバインドしません。

ボタンを次にクリックすると、新しいクリックハンドラがバインドされます。今は2つのクリックハンドラがあり、それぞれは作成時に生成された乱数を記憶するクロージャです。これで、1つのタイマーが要素を繰り返しクリックして起動し、クリックするたびに両方のクリックハンドラーがトリガーされます。

Answer 2

jQueryのデータ関数を使用しないでください。コード内に新しいjQueryオブジェクトを作成すると、タイマーを参照する能力が損なわれているような気がします。

clearTimeout(this.rotator);