jQuery onClickの実行


1

jQuery 1.2.5で書かれたこのJavaScriptのビットがあります。これは、私が書いたプラグインのmain関数()の中に入っています。プラグインは、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); 
    }); 

ありがとうございます!

  0

サイドノート1.2.5のリリースが変更され、1.2.6に重要なバグ修正があるので、jQuery v1.2.6を強くお勧めします。 23 9月. 082008-09-23 18:53:32

  0

私はそれを調べます。私はそれが私たちの解決策であり、本当にそれを変える力を持っていないので1.2.5を使っていましたが、私は誰が知っているのか知っています...> 23 9月. 082008-09-23 19:00:55

10

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

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

1

JavaScript関数呼び出しはasyncronusなので、以前の呼び出しが終了したときに呼び出されるコールバック関数をパラメータとして渡すことができます(エラーでも同じです)。

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

これが役に立ちます。

よろしくお願いいたします。


5

jQuery UIをご覧ください。具体的にはプラグインのthe effects-partです。スライドの効果はmy personal websiteです(ボックスの横にある矢印をクリックしてください)。

one event-handlerとコールバック関数を使用して、エフェクトが終了する前にユーザーがエフェクトを2回以上トリガするのを防ぎます。

afformentionedグローバルフラグに代わるものとして

Here's the source-code


2

、あなたはそのようには同じ動作を持つようにページ上の複数の要素を有効にする、DOM要素に値を割り当てることができます:

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