javascript - jQuery イベントの順序付け

Question

btnSubmitクリック イベントのコールバック関数が最初に発生し、次にアニメーションが発生するのに対し、btnSubmit2コールバック関数のイベントはアニメーションの終了後に発生するのはなぜですか?

$('#btnSubmit').click(function () {
    $('#testDiv').hide('slow,', onComplete());
});

var onComplete = function () {
    alert('test');
}

$('#btnSubmit2').click(function () {
    $('#testDiv').hide('slow', function () {
        alert('test');
    });
});

HTML

<form id="form1" runat="server">
    <div>
        <input type="text" id="auto" />
        <input type="text" id="auto2" />
    </div> 
    <a id="btnSubmit" href="#">SUBMIT</a>
    <a id="btnSubmit2" href="#">SUBMIT 2</a>

    <div id="testDiv">Here's some test text</div>
</form>

Answer 1

この行で：

$('#testDiv').hide('slow,', onComplete());

そこに括弧があるため、onComplete関数をすぐに実行しています。

代わりにこれを試してください：

$('#testDiv').hide('slow,', onComplete);

これは、関数を実行する代わりに関数への参照を渡します。