javascript - jQuery onClick の実行

Question

jQuery 1.2.5で書かれたこのJavaScriptのビットがあります。これは、私が作成したプラグインの main function() 内に含まれています。このプラグインは、jCarousel に非常によく似た水平ギャラリースクローラーです。幅の多くの自動計算を行い、それと画像のサイズに基づいてスクロールする数を決定します。これは、実行中のすべての計算です。

私の質問は、前の実行が終了する前にこれが発火するのを防ぐにはどうすればよいですか。たとえば、私が少しクリックして幸せになり、必死にマッシュダウンした場合.digi_next. それが起こると、UI で物事がうまくいかないので、それを修正したいと思います :) 答えはqueue.

    var self = this;
    $(".digi_next", this.container).click(function(){

        var curLeft = $(".digi_container", self.container).css("left").split("px")[0];
        var newLeft = (curLeft*1) - (self.containerPad + self.containerWidth) * self.show_photos;

        if (newLeft < ((self.digi_gal_width - (self.containerPad + self.containerWidth) * self.show_photos)) * -1) {
            newLeft = ((self.digi_gal_width - (self.containerPad + self.containerWidth) * self.show_photos)) * -1;
        }

        $(".digi_container", self.container).animate({
            left: newLeft + "px"
        }, self.rotateSpeed);
    });

score 10 · Accepted Answer

グローバルビジーフラグを使用するだけです。クリックハンドラーを入力するときは、それを確認し、falseの場合にのみ続行してください。すぐにtrueに設定し、アニメーションが終了したらfalseに戻します。JavaScriptはシングルスレッドであるため、競合状態を心配する必要はありません。

var busy = false;
$("...").onclick(function() {
    if (busy) return false;
    busy = true;
    $("...").animate(..., ..., ..., function() {
        busy= false;
    });
    return false;
});

score 5 · Accepted Answer

jQuery UIを見てください。具体的には、プラグインのエフェクト部分です。個人の Web サイトでスライドエフェクトを使用しています (ボックスの横にある矢印をクリックします)。

1 つのイベントハンドラーとコールバック関数を使用して、エフェクトが終了する前に、ユーザーがエフェクトを複数回トリガーするのを防ぎます。

ここにソースコードがあります

score 2 · Accepted Answer

前述のグローバルフラグの代わりに、値を DOM 要素に割り当てることができます。これにより、ページ上の複数の要素が同じ動作をすることができます。

$("...").onclick(function(el) {
    var self = el;
    if (self.busy) return false;
    self.busy = true;
    $("...").animate(..., ..., ..., function() {
        self.busy= false;
    });
    return false;
});

score 1 · Accepted Answer

JavaScript関数の呼び出しは非同期であるため、前の呼び出しが終了したときに呼び出されるコールバック関数をパラメーターとして渡すことができます（エラーについても同じです）。

この投稿で書いた関数を、以前に起動した関数のコールバックとして渡すことができます。

お役に立てれば。

よろしく

javascript - jQuery onClick の実行

4 に答える 4

Related

Reference