5

jQuery 1.6 のイベント委任により、共通の親にバブルアップしたイベントに応答できます。

サンプル実装は次のようになります。

(function($){
  $.fn.myeventhandler = function () {

     return this.delegate('a.next, a.prev', 'click customEvent', function (event) {

       var target=$(event.target);
       var bar = null;

       if('click' == event.type) {              /*~[ call this 'a' ]~*/

          // handle the click event
          $('#next-element').animate({width:'200px'},1300,function(){
             bar = 'value1';
             $('#next-element').animate({width:'100px'},1300,function(){
                 bar = 'value2';
                 console.log(bar);
             });
          });

       } else if('customEvent' == event.type) { /*~[ call this 'b' ]~*/

          // handle the customEvent event
          $('#my-element').animate({height:'200px'},1300,function(){
             bar = 'my-event1';
             console.log(bar);
          });

       }

       return false;
     });
  }
})(jQuery);

この種の構造は、ページにバインドしたいイベント トリガーが多数ある場合に非常にうまく機能します。しかし、私は奇妙な振る舞いに気づき、次の範囲について誰かが私を啓発できるかどうか疑問に思いました:

'a' の前に変数 ' ' を定義してvar bar;'a' で使用し、'a' の実行に時間がかかる場合、'click' が 2 回トリガーされると、'bar' 変数に値が再割り当てされますか?または新しいものが作成されますか？

質問の理由は、アニメーションが完了するまでに 1.3 秒かかる「未完成」のアニメーションがあるためです。2 つの連続したクリック イベントをトリガーすると、ターゲットとタイプは正しく設定されますが、2 番目のアニメーションが最初のアニメーションに影響を与えているように見え、2 つのスコープが相互に利用可能に見えます。

私はまだアニメーションを完成させていないので、jsFiddle でオンラインにするためのワーキング セットを持っていませんが、スコープの経験則はありますか? ?

編集: 上記では、私が使用しているものと同様の状況で追加しました。上記の単純化されたケースでは、'bar' の値は 2 つの連続した呼び出しでまだ期待値を保持していますが、より複雑なケースでは (まだ) 処理を行っていますが、パラメータを具体的にコールバック関数に渡さない限り、まだ残っています。コールバックが、トリガーされた独自の呼び出しで論理的に設定された値ではなく、後続の呼び出しによって作成された値を参照するように、2 つの連続した呼び出しでパラメーターの値を変更できる条件。誰かが単純化された例でこの効果を再現できるなら、私はそれを感謝します. それを複製する jsFiddle を生成しようとするために、関数を絞り込んでいます。

ありがとう、AE

4

2 に答える 2

1

もう一度クリックすると、新しい棒変数が作成され、両方の棒の値は互いに独立します。これを実際に見るために、私はフィドルを作成しました。すばやく 2 回クリックすると、2 回目のバーがデフォルト値になり、最初のバー変数が持っていた値ではないことがわかります。これは予想どおりです。

于 2011-09-30T14:55:41.263 に答える
0

イベント オブジェクトは、さまざまなイベントで新しく作成される代わりに渡されます。したがって、'a' は再割り当てされませんが、両方のイベント アクションの影響を受けます。

于 2011-09-30T14:50:10.340 に答える