0

私の jQuery プラグインでは、以下の簡単な例のように、ユーザーによって定義されたいくつかのコールバックがあることを期待することがよくあります

(function($) {
    $.fn.myplugin = function(options) {
        var s = $.extend({}, options),
            $this = $(this);

        if (typeof s['initCallback'] === 'function') {
            s['initCallback']($this);    
        }
        $this.animate({width: '+=300'}, 3000);   /* animation in plugin */
    }
})(jQuery);

定義されたコールバックにこのような同期コードが含まれている場合があり、このコードは期待どおりに機能します

$('#mydiv').myplugin({
    initCallback : function(mydiv) {
       $('<div>This is synchronous, so it will entirely executed before animation</div>')
           .insertBefore(mydiv);
    }   
});

しかし、他のケースでは、コールバックはこのような非同期アニメーションを定義できます

$('#mydiv').myplugin({
    initCallback : function(mydiv) {
       $('<div>animations are not synchronous here</div>')
           .insertBefore(mydiv)
           .hide()
           .fadeIn(4000); /* animation in callback */
    }   
});

この最後のケースでは、明らかに重複する 2 つのアニメーションがあります。これは、私の実行後、残りのプラグイン コードがコールバックinitCallback()で適切に実行されないためです。fadeIn()

だから私は尋ねています：それがinitCallback()定義するコードに関係なく、実行を確実に終了させるために、両方の種類のコード（非同期/同期）を処理するための一般的なjQueryパターンは存在しますか？それとも、2 つの異なる方法で両方のケースをコーディングする必要がありますか?

この例のコードは、http://jsfiddle.net/fcalderan/LKttT/で入手できます。

前もって感謝します。

4

1 に答える 1

1

http://api.jquery.com/animate/

.animate( プロパティ、オプション )

プロパティアニメーションが移動する CSS プロパティのマップ。

options メソッドに渡す追加オプションのマップ。サポートされているキー:

  • duration: アニメーションの実行時間を決定する文字列または数値。
  • easing: トランジションに使用するイージング関数を示す文字列。
  • complete: アニメーションが完了したら呼び出す関数。
  • step: アニメーションの各ステップの後に呼び出される関数。
  • queue: アニメーションをエフェクト キューに配置するかどうかを示すブール値。false の場合、アニメーションはすぐに開始されます。
  • specialEasing: properties 引数で定義された 1 つ以上の CSS プロパティのマップと、それに対応するイージング関数 (1.4 で追加)。

キューをfalseに設定する必要があります。

于 2010-11-12T09:39:52.277 に答える