Question

链接函数（例如$('#id').function1().function2();）和函数作为回调函数（例如$('#id').function1(function2());）是否存在差异？

例如，当点击div#nr1或div#nr2时，以下代码（对我而言）完全相同，只有使用回调函数的代码更详细：

<html>
<head>
<title>PageTitle</title>
<style>
div#nr1,
div#nr2 {
    width: 100px;
    height: 100px;
    background-color: #ccc;
}

</style>
</head>
<body>

<div id="nr1">A</div>
<br />
<div id="nr2">B</div>

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
$(function() {

$("#nr1").click(
    function() {
        $(this).fadeToggle(1000).fadeToggle(1000);
    });

$("#nr2").click(
    function() {
        $(this).fadeToggle(1000, function() {
            $(this).fadeToggle(1000);
        });
    });

});
</script>
</body>
</html>

何时建议使用一种或另一种方法？

Answer 1

这两种方法之间存在很大差异。在你的例子中，没有区别因为你想在同一个对象上执行该方法。

我将从相似之处开始。在完成之前的方法之后调用这两种方法。（这里没有新内容）。

第一种方法方法链接通常会将对象的所有更改传递给该函数，所以如果你有

$('.my-class').method1().method2();

method1()和method2()执行DOM对象$（＆＃39; .my-class＆＃39;），更改内容（当然，正在返回this ，以便他们可以被链接）。如果你注意到，在开始我说通常＆＃39; ，因为链式方法可以操纵其他对象，而不是它们传递的对象（但这对于可链接函数来说是奇怪的行为）。

如果您希望回调操作同一个对象$(this)，则第二种方法回调是无用的，就像您的代码一样。如果您以可链接方法的目的使用回调，则您的代码将不具有可读性。通常，如果您希望函数结束时在其他对象上执行某些操作，则使用回调方法，如下所示：

$('.my-class').method1(function(){
    $('#my-id').method2();
});

例如，animate方法将两种实践集成在其中。如果你想要相同的动画来操纵前一个对象，而不是链接它们，但是如果你想在函数的末尾改变一个变量，那就回调它。

Answer 2

链接和回调完全是两回事。

通常，您需要一些对象引用来调用方法，而不是使用 objectRef.method1()然后objectRef.method2()，我们只返回objectRef作为method1执行的返回结果，现在我们有了引用，我们可以像这样调用其他方法objectRef.method1().method2() 。它只是减少了冗长。

回调/事件处理程序是我们传递的匿名/命名函数，用于响应某些事件。

来你的榜样，

$(this).fadeToggle(1000, function() {
    $(this).fadeToggle(1000);
});

在这里，你只需要动画一段跨越1000毫秒的元素，一旦动画完成，你的回调就会被调用。在这里，你再次为该元素设置动画1000ms。

如果您只想管道动画，请使用链接但如果想在动画后执行某些操作，请使用回调。

链接函数和在jQuery中使用回调函数有区别吗？

2 个答案: