0

JavaScriptの基礎を正しく理解していないのは私だけだと確信しています。しかし、if ステートメント内のステートメントが false に評価されるはずなのに、イベント バブリング時に if ステートメントが true に評価されるという印象を持っている理由を誰かが指摘できますか?

if(sFormula > 168) は、html < a > タグを一度に 1 回押すと意図したとおりに動作するように見えますが、すばやくクリックするとすべてがおかしくなります。

ここにコードを含む jsFiddle があります: http://jsfiddle.net/twimB/pGHrP/以下は全体のほんの一部です。

誰かが時間を割いて説明してくれれば幸いです。

ありがとう。

HTML

<a href="#" id="right">&raquo;</a>

jQuery

$("#right").click(function(event){
    event.stopImmediatePropagation();
    if(busy == false){
        busy = true ;
        var parentMargin = $(".wrap").offset().left;
        var parentWidth = $(".wrap").width();
        var carouselMargin = $(".block").offset().left;
        var carouselWidth = $(".block").width();
        var rFormula = carouselWidth - ((parentMargin - carouselMargin) + parentWidth);
        $(".pLeft").text("");
        $(".pRight").text("if ( rFormula > 0 ) {perform slide} fFormula is: " + rFormula);
        if(rFormula > 168){
            $(".block").animate({"left": "-=168px"}, "slow");
        }
        busy = false ;
    }
});
4

1 に答える 1

4

メソッドはスクリプトの.animate()実行を停止しません。何が起こるかというと、アニメーションが開始され、スクリプトの実行が続行され、busyすぐに false に設定されます。

必要なのは、コールバック関数を使用してアニメーションが終了した後にのみフラグを設定することです。

if(rFormula > 168){
    busy = true;
    $(".block").animate({"left": "-=168px"}, "slow", function() { busy = false });
}

(アニメーションの開始前にフラグを設定してもメリットがないため、ここでもフラグの設定を移動したことに注意してください。)

デモ: http://jsfiddle.net/pGHrP/1/ (右ボタンのみ更新しました。)

于 2013-06-02T12:24:34.257 に答える