jQuery中的deferred使用方法

deferred是jQuery中处理异步操作的一种方式，可以帮助我们高效地处理异步代码。本文将详细讲解jQuery中的deferred使用方法。

什么是deferred

deferred是一种处理异步操作的方式，它可以让我们在异步操作完成后执行回调函数或者操作其他的异步操作，以及可以用于状态的传递。在jQuery中，大部分异步操作都返回一个deferred对象。

常用的deferred方法

deferred有多种方法，以下是几种常用的方法：

• deferred.done()：当异步操作成功时调用的方法。
• deferred.fail()：当异步操作失败时调用的方法。
• deferred.always()：无论异步操作成功还是失败，都会调用该方法。
• deferred.then()：对done()和fail()两个方法进行包装，当异步操作完成时可以进行链式调用。

应用场景

一般在异步操作成功或失败时调用不同的方法来处理结果。

以下是一个简单的示例：

function getRemoteData() {
  var deferred = $.Deferred();
  $.ajax({
    url: 'test.json',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
      deferred.resolve(data); // resolve方法表示成功
    },
    error: function() {
      deferred.reject(); // reject方法表示失败
    }
  });
  return deferred;
}

getRemoteData().then(function(data) {
  console.log(data);
}, function() {
  console.log('获取数据失败');
});

以上示例中，getRemoteData()获取数据的过程是异步的，根据结果调用deferred.resolve()或deferred.reject()方法。当异步操作成功时，调用then中的第一个参数函数，否则调用第二个参数函数。

下面是另一个示例：

function imageLoader(url){
  var img = new Image();
  var deferred = $.Deferred();

  img.onload = function(){ 
    deferred.resolve(this); 
  };
  img.onerror = function(){ 
    deferred.reject(); 
  };

  img.src = url;

  return deferred.promise(); 
}

imageLoader('http://example.com/1.jpg').then(function(img){
  console.log('图片1加载完成');
}).fail(function(){
  console.log('图片1加载失败');
});

imageLoader('http://example.com/2.jpg').then(function(img){
  console.log('图片2加载完成');
}).fail(function(){
  console.log('图片2加载失败');
});

以上示例中，定义了一个imageLoader()函数用来异步加载图片。使用deferred.promise()方法返回一个promise对象，并使用deferred.resolve()和deferred.reject()方法来表示异步操作的结果。在主函数中分别调用了两次imageLoader()方法，然后对每一个异步操作结果使用then()方法进行处理。

结论

使用deferred可以使异步代码的编写更加简单和高效，同时充分利用promise的状态机特性来提高可读性和可维护性。使用deferred之前，需要仔细理解上述文中提及的3个常用deferred方法done、fail、always，以及then方法的链式调用方式。