jquery基础教程之deferred对象使用方法

在jQuery中，`deferred`对象是一个非常重要的概念，它主要用来处理异步操作和回调函数，提供了一种更优雅的方式来组织和管理异步代码。`deferred`对象的引入是为了增强jQuery对异步编程的支持，尤其是在处理多个异步操作时，能够更好地控制流程和维护代码的可读性。 一、`deferred`对象是什么？ `deferred`对象是由jQuery 1.5版本引入的，用于解决JavaScript中异步操作的回调函数问题。在JavaScript中，尤其是在处理如Ajax请求这样的异步操作时，常常需要定义回调函数来处理操作完成后的逻辑。`deferred`对象提供了一种延迟执行的方法，使得开发者能够以链式调用的方式添加和管理这些回调函数，同时提供了一套统一的API。 二、`ajax`操作的链式写法 在传统的jQuery `ajax`调用中，我们通常会为`success`和`error`事件设置回调函数。然而，使用`deferred`对象后，我们可以使用`.done()`和`.fail()`方法替代，如以下示例所示： ```javascript $.ajax("test.html") .done(function() { alert("哈哈，成功了！"); }) .fail(function() { alert("出错啦！"); }); ``` 这种链式写法使得代码更加简洁且易于阅读。 三、指定多个回调函数 `deferred`对象允许添加多个回调函数，这些回调函数会按照添加的顺序依次执行。例如： ```javascript $.ajax("test.html") .done(function() { alert("哈哈，成功了！"); }) .fail(function() { alert("出错啦！"); }) .done(function() { alert("第二个回调函数！"); }); ``` 在这个例子中，如果`ajax`请求成功，将会依次执行两个`.done()`回调函数。 四、为多个操作指定回调函数 `$.when()`方法是`deferred`对象的一个重要特性，它允许为多个异步操作指定同一个回调函数。例如： ```javascript $.when($.ajax("test1.html"), $.ajax("test2.html")) .done(function() { alert("哈哈，成功了！"); }) .fail(function() { alert("出错啦！"); }); ``` 这里，如果两个`ajax`请求都成功，`done()`回调会被执行；如果有任何一次请求失败，`fail()`回调会被调用。 五、普通操作的回调函数接口（上） `deferred`对象不仅仅用于`ajax`操作，还可以应用于任何异步或同步操作。例如，对于一个模拟耗时操作的函数`wait`，我们可以如下使用`deferred`对象： ```javascript var wait = function() { var deferred = $.Deferred(); setTimeout(function() { alert("执行完毕！"); deferred.resolve(); // 完成并触发done() }, 5000); return deferred.promise(); // 返回Promise对象，以便于链式调用 }; wait() .done(function() { alert("哈哈，成功了！"); }) .fail(function() { alert("出错啦！"); }); ``` 在这个例子中，`wait`函数返回一个Promise对象，它与`deferred`对象关联，允许我们在不直接操作`deferred`对象的情况下，仍然能添加回调函数。 总结来说，`deferred`对象是jQuery提供的一个强大工具，它极大地提升了异步编程的便利性和代码的可维护性。通过`.done()`, `.fail()`, 和`.when()`等方法，开发者可以更灵活地组织异步代码，并避免回调地狱问题。结合Promise/A+规范，`deferred`对象使得异步控制流变得更加清晰，为现代JavaScript开发提供了坚实的基础。