javascript関数がすでに実行中か、または別の実行中であることを防ぐ最も良い方法は？

Question

私はjqueryを使用しています。私がやっていることは、Webページ上のいくつかのボタンにトグルメソッドをバインドすることです。このようなものです。

$('.button').toggle(function(){ 
    // first function 
}, function(){ 
    // second function 
}); 

ただし、これらの機能にはアニメーションがあります。したがって、ユーザは、第1または第2の機能が実行されている間にボタンをクリックすることができる。そして、これはHTML要素の順序を混乱させ、ページの最後に移動させる可能性があります。基本的にこれらの機能は最初のクリックで要素を最後まで移動させ、もう1回は最初の要素を元の位置に戻します。

もちろん、ページを移動するとボタンをクリックするのは難しいです。しかしそれは可能です。

Answer 1

自分のトグルを実装するのが嬉しいようです。トグルは実際にはロジックが0個の場合にのみ機能します。

$('.button').click( 
function() { 
    if($(self).is(":animated") { 
    return false; 
    } 
    if($(self).is(".rolledup")) { 
    self.apply(roll_window_down);  
    } else { 
    self.apply(roll_window_up);  
    } 
}); 



function roll_window_up() { 
    $(self).addClass('rolledup'); 

    // first function  
} 

function roll_window_down() { 
    $(self).removeClass('rolledup'); 
    // first function  
} 

Answer 2

フラグを使用できます。アニメーション開始時にフラグisAnimatingをtrueに設定し、終了時にfalseに設定します。以降のアニメーションは、この値がfalseの場合にのみ進めることができます。

:animated selectorがイベントの所有者に該当するかどうかを確認することもできます。あなたの意思決定をその根拠に基づいて行います。

Answer 3

boolをセミフォアとして使用することはできますが、これは決して安全ではありませんが、javascriptは実際にはロックをサポートしていないため、このアプローチではデッドロックや競合状態になる可能性があります。あなたは2つの機能を配置する必要があり

Answer 4

回:)の99.9％を働くあなたは、関数の入り口を制御するためのフラグを保持することが可能な状況に切り替えるために渡す： -

(function() { 
    var toggling = false; 
    $('.button').toggle(function(){ 
    if (!toggling) { 
     toggling = true;   
     // first function 
     toggling = false; 
    } else { 
     // whatever you want to happen if re-entrance attempted 
    } 
    }, function(){ 
    if (!toggling) { 
     toggling = true;   
     // second function 
     toggling = false; 
    } else { 
     // whatever you want to happen if re-entrance attempted 
    } 
    }) 
)(); 

NBこれはシリアライズすべては、.buttonクラスを持つ要素のトグルです。 IOWはすべてのボタンに対して1つのtogglingフラグしかありません。各ボタンに独自のトグルフラグを設定したい場合： -

$('.button').each(function() { 
    var toggling = false; 
    $(this).toggle(function(){ 
    if (!toggling) { 
     toggling = true;   
     // first function 
     toggling = false; 
    } else { 
     // whatever you want to happen if re-entrance attempted 
    } 
    }, function(){ 
    if (!toggling) { 
     toggling = true;   
     // second function 
     toggling = false; 
    } else { 
     // whatever you want to happen if re-entrance attempted 
    } 
    }); 
); 

Answer 5

キューが必要です。あなたはセマフォ変数を1構築することができますが、jQueryのは、すでに1を提供するので、多分あなたはそれを使用したい：

$('.button').toggle(function() { 
    $(document).queue("foo", function() { 
    ... 
    }); 
}, function() { 
    $(document).queue("foo", function() { 
    ... 
    }); 
}); 

jQueryのは、通常のアニメーションをシリアル化するために、「FX」キューを使用しますが、この「foo」を使用することができますあなたが望むもののためのキュー。

キューはどのオブジェクトにも置くことができるので、その中にすべての.buttonオブジェクトを持つコンテナに配置したいかもしれません。あなたはボタン（これ）自体にそれを置くことはできません、またはあなたは今どこにいるかに戻るでしょう。

これを済ませたら、実際にやる必要があるのはアニメーションを中止することだけです。これは、明示的に "fx"キューを空にするか、$('.button').stop();を使用してすべての古いアニメーションを停止することによって実行できます。