jQueryなぜコードが.animate（）関数で2回実行されていますか？

Question

私の現在のjQueryコードの中で、私は自分のWebページのトップにアニメーションを作成し、後で隠れ要素をドロップダウンすることを可能にしたかったのです。問題は、この要素が隠されているかどうかを確認するためにif文を使用していますが、コードがそのif文を2回実行するため、スライドダウン直後にドロップダウンが滑ります。

私は次のコードを実行すると：それは警告をポップアップ表示されます

$("a#drop-user-box").click(function() 
{ 
    $("html, body").animate({scrollTop: 0}, "slow", function() 
    { 
     alert("foo"); 
    }); 
    return false; 
}); 

を、私がクリックしたときに、例えば「OK」ボタンを押すと、別の警告が開く（コードが2回実行される）。誰が私になぜこれが起こっているのか説明できますか？

私はそうのような警告を追加します。

$("a#drop-user-box").click(function() 
{ 
    alert("foo"); 
    //$("html, body").animate({scrollTop: 0}, "slow", function() 
    //{ 

    //}); 
    //return false; 
}); 

（ただし、その後は）一度コード（この中に（例）の場合、アラート）を実行します。

JSFiddle

Answer 1

次の2つの要素（身体とhtml）をアニメーション化されているので、2つのアニメーションの完全なコールバックがあるからです。 promiseメソッドを使用すると、期待どおりに動作します。

$("html, body").animate({scrollTop: 0}, "slow") 
.promise().then(function() { 
    alert("foo"); 
}); 

https://jsfiddle.net/719xffa5/3/

Answer 2

はい。セレクタで2つの要素が渡されるため、コールバック関数が複数回実行されています。あなたの問題を解決するために

、あなたがwhenとthen方法使用できます。また

$.when($('html,body').animate({scrollTop: 0},'slow')) 
    .then(function() { 
    alert('foo'); 
    }); 

demo

を、あなたはpromiseメソッドを使用することができhereを説明：

$('html, body').animate({scrollTop: 0}, 'slow') 
.promise().then(function() { 
    alert('foo'); 
});