zoukankan      html  css  js  c++  java
  • jQuery中deferred对象的使用(一)

    在jquery1.5之后的版本中,加入了一个deferred对象,也就是延迟对象,用来处理未来某一时间点发生的回调函数。同时,还改写了ajax方法,现在的ajax方法返回的是一个deferred对象。

    那就来看看deferred对象的用法。

    1.ajax的链式回调

    // ajax方法返回的是一个deferred对象,可以直接使用链式写法
    $.ajax('test.json').done(function(resp){
        // done 相当于success回调,其中默认的参数为success回调的参数
        alert('success');
    }).fail(function(){
        // fail 相当于error回调
        alert('error');
    });

     还可以同时写多个回调,会按照顺序依次执行

    $.ajax('test.json').done(function(resp){
        // done 相当于success回调,其中默认的参数为success回调的参数
        alert('success');
    }).done(function(){
        // do something...
    }).done(function(){
        // do something...
    });

     deferred对象还有一个then方法,其实它是一个整合done和fail的方法,它接受一到两个参数,如果有两个参数,那么第一个就是done方法的回调函数,第二个是fail方法的回调函数。如果只有一个参数,那就是done方法的回调函数。

    var success = function(){
      alert('success');  
    };
    
    var error = function(){
      alert('error');
    };
    
    // 两个参数
    $.ajax('test.json').then(success, error);
    
    // 一个参数
    $.ajax('test.json').then(success);

     jQuery还提供了一个$.when(deferreds)的方法来执行一个或多个延迟对象的回调函数,当它的参数是延迟对象时,它会在所有延迟对象代表的异步执行完后再执行相应的回调函数

    $.when($.ajax('test.json'), $.ajax('demo.json'))
    .done(function(){ alert('success'); }).fail(function(){ alert('error'); });

    很好理解,只有当所有异步都成功时,才会执行done方法中的回调,否则会执行fail方法中的回调,同样好理解的是的done方法中回调函数的默认参数数量则和when方法参数数量相同。

    而如果when方法中传入的只是普通对象,不是deferred对象时,会立即执行done方法中的回调,回调函数的默认参数为传入when方法的对象本身。

    // 当传入when方法的参数只是普通对象时
    $.when({test: 'test'}).done(function(resp){
       console.log(resp.test); // 'test' 
    }).fail(function(){
       // 由于传入的对象不是deferred对象,那么就不会调用fail中的回调了   
    })

    当你需要两个甚至更多的异步结束后才调用回调函数,同时这些异步ajax可能还需要修改传输方式type或者传数据data时,代码就显得很乱,可读性很差。

    所以就可以对ajax进行再次封装,提高代码可读性

    var ajax = function(url, type, param){
      return $.ajax({
        url: url,
        type: type,
        data: param || {}    
      });  
    };
    
    ajax('test.json').done(function(resp){
        alert('success');
    }).fail(function(){
        alert('error');
    });
  • 相关阅读:
    洛谷P4172 [WC2006]水管局长(lct求动态最小生成树)
    洛谷P1501 [国家集训队]Tree II(打标记lct)
    洛谷P2173 [ZJOI2012]网络(10棵lct与瞎jb暴力)
    [Asp.net 5] Localization-resx资源文件的管理
    [Asp.net 5] Localization-简单易用的本地化-全球化信息
    [Asp.net 5] Configuration-新一代的配置文件
    [Asp.net 5] Configuration-新一代的配置文件(ConfigurationSource的多种实现)
    [Asp.net 5] Configuration-新一代的配置文件(神奇的Binder)
    [Asp.net 5] Configuration-新一代的配置文件(接口定义与基础实现)
    [Asp.net 5] DependencyInjection项目代码分析-目录
  • 原文地址:https://www.cnblogs.com/fxxkhigh/p/5527621.html
Copyright © 2011-2022 走看看