ユーザーが画像を何回もクリックさせないようにする

Question

私はこの画面にonclick関数を与え、この関数は画面上にアニメーションを実行する関数を呼び出します。画像をクリックする回数が多すぎると、ユーザーがクリックを停止した後もアニメーションが何度も繰り返されます。私はそれが起こることを望んでいない。前回のクリックでアニメーションが終了した後（ユーザーがJQueryをアニメーション化した後）にのみ、次の時間をクリックできるようにします。

Answer 1

あなたはどちらかだけの

.stop(true, true) 

をちょうどでしょう呼び出すことができますアニメーションを「リセット」する（パラメータは、キューをクリアし、最後にジャンプする）。後者のソリューションでは、クリック（ハンドラ）の発射を許可しないでください。

参考：.stop()、:animated selector

Answer 2

ブール値を作成し、アニメーションが開始するとfalseに設定します。アニメーションが終了したときはtrue、デフォルトではtrueです。ブール値がtrueに設定されているときにユーザーがクリックできるようにします。あなたが任意のjQueryのFX関数を呼び出すか、ターゲット要素が現在アニメーション化されている場合は、あなたが

if(!$('#myimage').is(':animated')) { 
} 

のように、かつての解決策を確認することができます前に、

Answer 3

は好ましい方法（クロージャを参照）指向複数のオブジェクトがあるかもしれませんが、あなたは、単にこのようにそれを行うことができます：あなたが使用している場合は、

var isInFunction = false; 

function myHandler() { 
    if (isInFunction) { 
     return; 
    } 
    isInFunction = true; 

    // do function logic 

    isInFunction = false; 
} 

または代わりにjQueryのアニメーション機能を使用する場合は、アニメーションが完了した後にisInFunctionをfalseに戻したいので、アニメーションにかかる時間が経過した後にそのvarをfalseに設定するコールバックを設定する必要があります。

これは、この変数がすべての画像で同じであることを意味するので、複数の画像を同時にアニメートできるようにするには、変数を画像ごとに分離する必要があります。

:animatedは、私があなたがすべきことを示唆しているので、イメージ単位/要素単位で追加のオーバーヘッド/コールバックを使用しないため、これより優れています。

Answer 4

何ができることはonclickの1に画像タグのいずれかを設定して、アニメーションが終了した後、バック0

にタグを設定しますが、タグの値が0