javascript - jQuery animate "complete"回调触发太快

Question

根据jQuery documentation .animate 有一个名为“Complete”的参数，该参数仅应在动画完成后触发。不幸的是，我发现它在动画开始之前就触发了。

if ($('html').scrollTop()) {
    $('html').animate({ scrollTop: 0 }, callback);
    return;
}

JSFiddle 显示问题: http://jsfiddle.net/JohnnyWalkerDesign/5zu90ygz/

我错过了什么？

Answer 1

callback 参数应该是一个函数指针。这不是一个现在经常使用的术语，但它意味着您传递的是函数本身，而不是函数的结果。

这是什么意思？

举个例子:

function message(q) {
    alert(q);
}

这里，message是一个函数。要将该函数作为回调传递，请使用函数的名称，例如:

setTimeout(message, 100);
$("#id").click(message);

请注意，函数名称后面没有 ()。

用 JavaScript 术语来说，函数本身是一个变量，您可以传递变量，但是一旦添加 ()，您就调用了函数并传递结果，而不是函数本身。

如果您使用message()，那么该函数将被执行，并且函数的结果作为回调传递，即:

setTimeout(message("x"), 100);

相当于:

var x = message("x");
setTimeout(x, 100);

因此，您可以从这段代码中看到为什么消息立即运行(对于点击事件或更长的超时更明显)。

格式 setTimeout(message, 100); 并不经常使用，因为 a) 它看起来像是一个拼写错误(应该是 message() 吗？) b) 它不允许您传递参数，因此通常会写为:

setTimeout(function() { message("x") }, 100);

它使用匿名内联函数作为回调变量/函数指针。

<小时/>

返回问题:

在您的 original fiddle 中，您所需要做的就是将 callback 更改为真正的 callback，无需添加单独的参数，即:

$('#scroll').on('click', function(e) {
    e.preventDefault;
    scrollToTop(function() { message("Reached Top")});
});

更新的 fiddle :http://jsfiddle.net/5zu90ygz/9/