jQuery 回调

理解 jQuery 回调函数

回调函数（Callback functions）确保一段代码只在另一个异步操作（例如动画或 AJAX 请求）完成后执行。

为什么使用回调函数？

JavaScript 逐行执行代码。然而，许多 jQuery 操作，特别是效果（如 hide()、fadeIn()）和 AJAX 请求，是异步的。这意味着它们会启动一个操作，但在其完成之前不会等待，而是继续执行下一行代码。

考虑以下代码：

$("p").hide(1000); // 在 1 秒内开始隐藏
alert("The paragraph is now hidden... or is it?"); // 这行代码会立即运行！

这个 alert 会在段落完全隐藏之前出现，因为 hide(1000) 启动了动画，但不会阻塞（block）代码执行。

要在效果完成之后执行代码，你需要提供一个回调函数。

效果方法的语法：

$(selector).effectName(speed, callback);

其中 callback 是一个函数，它会在 effectName 动画 100% 完成后执行。

使用回调函数的示例：

$(function() {
  $("button").on('click', function() {
    $("p. MuiDialog-paper").hide('slow', function() {
      // 这个函数就是回调函数
      alert("The test paragraph is now completely hidden.");
    });
  });
});

在这个例子中，alert 只会在 class=" MuiDialog-paper" 的段落完成其 ‘slow’ 隐藏动画之后出现。

不使用回调函数的示例（时机不正确）：

$(function() {
  $("button").on('click', function() {
    $("p. MuiDialog-paper").hide(1000); // 开始隐藏
    // 这个 alert 会立即运行，在隐藏动画完成之前
    alert("The paragraph hiding has started, but isn't finished yet!");
  });
});

回调函数与 Promises 在 AJAX 中的应用

尽管回调函数在 jQuery 效果中很常见，但现代 JavaScript 和较新版本的 jQuery 在处理像 AJAX（$.get、$.post、$.ajax）这样的异步操作时，强烈推荐使用 Promises。

Promises 提供了一种更灵活、更易读的方式，通过使用 .done()、.fail() 和 .always()（或者 .then() 和 .catch()）等方法来管理异步操作的成功和失败状态。

使用 Promises 与 $.get 的示例：

$(function() {
  $("button#load-data").on('click', function() {
    $.get('api/data.json')
      .done(function(data) {
        // 请求成功时执行
        console.log("Data loaded successfully:", data);
        $("#content").text(JSON.stringify(data));
      })
      .fail(function(xhr, status, error) {
        // 请求失败时执行
        console.error("Failed to load data. Status:", status, "Error:", error);
        $("#content").text("Error loading data.");
      })
      .always(function() {
        // 无论成功或失败都会执行
        console.log("AJAX request finished.");
      });
  });
});

尽管你仍然可以直接将回调函数传递给像 $.get 这样的方法，但在现代 jQuery 中，使用 Promise 接口（.done()、.fail()）通常被认为是进行 AJAX 操作的更好实践。