jQuery 回调函数和方法链接使用_jquery+lhgdialog 保存与删除都有回调函数怎么判断是谁触发的-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45195200/article/details/120519018

这篇博客探讨了jQuery中回调函数的概念及其在异步操作中的应用，通过animate方法展示了如何在动画完成后执行回调函数。同时，文章还介绍了jQuery中的方法链接使用，通过实例解释了如何在一个语句中串联多个jQuery方法，实现元素状态的连续改变。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在前面的章节中，我们也学习了一些 jQuery 的方法，大家有没有发现，这些方法大多都有一个共同点，就是有一个可选的 callback 参数，这个 callback 其实就是一个回调函数，回调函数作为参数传到另一个函数里面，一旦事件发生或者某一个任务完成时被执行，经常在异步代码中使用。

回调函数的使用

我们通过一个函数来举例，看一下当任务执行完成时，是如何执行回调函数的。

示例：

例如在执行 animate 函数时添加一个回调函数作为参数，在动画执行完毕后调用回调函数，弹出弹出层：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $(".rect").animate({width: '300px'}, 1500,function(){ alert("回调函数") });
      
    });
  });
</script>
</head>
<body>
  <div class="box">
    <div class="rect" style="background: red;width: 100px;height: 100px;"></div>
  </div>
  <p><button>点击执行动画</button></p>
</body>
</html>

在浏览器中演示效果：

再看一下如果不带 callback 回调函数，会有什么样的执行效果呢，如下为去掉回调函数的代码：

$(function(){
    $("button").click(function(){
      $(".rect").animate({width: '300px'}, 1500);
      alert("回调函数");
    });
});

在浏览器中的演示效果：

方法链接使用

在 jQuery 中允许我们将方法链接使用，也就是说可以在一条语句中使用多个 jQuery 方法，通过点号 . 链接。

示例：

我们来看一个例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $(".rect").css("background", "tomato").slideUp(1500).slideDown(1500);
    });
  });
</script>
</head>
<body>
  <p><button>点击按钮</button></p>
  <div class="rect" style="background: red;width: 100px;height: 100px;"></div>
</body>
</html>