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);

这传递了对函数的引用而不是执行它。

Answer 2

您没有传递函数引用

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

您正在执行该函数并将返回值 ( undefined) 传递给该hide方法。

Answer 3

看看这两段代码的区别。在一个中，您通过调用内部传递一个匿名函数alert。另一个你立即调用你的函数。

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

应该

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

否则，您将函数的结果作为回调而不是函数本身传递。