zoukankan      html  css  js  c++  java
  • 大话 jquery deferred

      今天在jquery找获取实际元素的高度方法,就是scrollHeight的属性,但是没找到! height()方法返回的是元素的可视高度,就是offsetHeight。不知道哪位大侠有么有知道的。

    else if ( elem.nodeType === 9 ) {
                // Either scroll[Width/Height] or offset[Width/Height], whichever is greater
                return Math.max(
                    elem.documentElement["client" + name],
                    elem.body["scroll" + name], elem.documentElement["scroll" + name],
                    elem.body["offset" + name], elem.documentElement["offset" + name]
                );

    当nodeType ===9 的时候,如果有滚动条,才返回scrollHeight,这个时候 在上面的三个中scrollHeight最大。

      在找scrollHeight 时候,看了一下deferred的对象,以前对这个对象,没怎么用过!今天也没事,详细了解一下!

      异步模式在web编程中变得越来越重要,对于web主流语言Javscript来说,这种模式实现起来不是很利索,为此,许多Javascript库(比如 jQuery和Dojo)添加了一种称为promise的抽象(有时也称之为deferred)。“Promises” 代表着在javascript程序里下一个伟大的范式,但是理解他们为什么如此伟大不是件简单的事。它的核心就是一个promise代表一个任务结果, promise模式在任何时刻都处于以下三种状态之一:未完成(unfulfilled)、已完成(resolved)和拒绝 (rejected)失败!Promise 模式是也是 CommonJS 的规范之一!  举了例子

    var dfd = $.Deferred();
            dfd.done( function(val){
                    alert(val);
            })
            .done(function() {
                alert(1);
            })
            .fail(function(val) {
                alert(val);
            })
            dfd.resolve("exe");

      当调用resolve方法的时候,改变对象状态为完成,同时传参数,执行done,通过运行可以看到没有执行fail。 下面是常用的几个方法:

      deferred.always() : 不管失败还是成功都会执行

      deferred.done():成功会执行

      deferred.fail() :失败会执行

      在jquery 1.5 以上的我们发ajax的回调可以这样写

    $.ajax("test.html")
        .progress(function(){alert('loading,等待多戈')})
        
      .done(function(){ alert(":-D,成功了");} )
    
      .fail(function(){ alert("o(╯□╰)o,失败!"); } )
    
      .done(function(){ alert(":),再次成功!");} );

    可以看到,done()相当于success方法,fail()相当于error方法,还可以写多个回调,顺序执行!采用链式写法以后,代码的可读性大大提高。

    为多个操作指定回调函数 用到when  比如

    //单个
    $.when( $.ajax("test.aspx") ).then(function(data, textStatus, jqXHR){
         alert( jqXHR.status ); // alerts 200
    });
    
    //多个
    $.when($.ajax("/page1.php"), $.ajax("/page2.php")).done(function(a1,  a2){
      /* a1 and a2 are arguments resolved for the
          page1 and page2 ajax requests, respectively */
      var jqXHR = a1[2]; /* arguments are [ "success", statusText, jqXHR ] */
      if ( /Whip It/.test(jqXHR.responseText) ) {
        alert("First page has 'Whip It' somewhere.");
      }
    });

    当多个的时候,a1,a2 是个数组 [data,textStatus,jqXHR]; 有时为了省事,可以把done()和fail()合在一起写,这就是then()方法。比如

    $.when($.ajax( "/main.php" ))
    
      .then(successFunc, failureFunc );

    当使用when的时候,都成功则成功,有一个失败,则会失败!


    方便的多个回调,deferred.pipe()

     比如你可能会发一个ajax,成功会用到返回的data,需要用到data再发一个ajax,多次套用! 用pipe能很好的解决这个问题比如

    $('button').bind('click', function(){
                var requst = $.ajax({
                                url : 'data.php',
                                type : 'POST',
                                dataType : 'json',
                                async : false,
                                data : {'name' : 'liuzhang','age':29}
                            }),
                    chian = requst.pipe(function(o){
                            return $.ajax({
                                url : 'data2.php',
                                type : 'POST',
                                dataType : 'json',
                                async : false,
                                data : {'id' : o.id}
                            });
                    });            
                chian.progress(alert('progress')).done(function(data) {
                    console.log(data);
                });
            });

     上面request调用pipe 增加一个回调,把请求的data当做参数,里面是一个ajax!这样就很方便了!
     

    真的很强大!

  • 相关阅读:
    excel 读取
    MSDN异步编程概述 [C#] zzhttp://www.cnblogs.com/hxhbluestar/articles/60023.html
    window.opener showModelessDialog showModalDialog 获取|控制父窗体的区别
    MySql中文乱码解决方法
    关于随机数
    javascript 日期处理(注意事项)
    一个简单访问office程序的控件,不依赖officedll
    关于12306的bug
    回车提交
    js动态添加外部js(顶)
  • 原文地址:https://www.cnblogs.com/liuzhang/p/3043402.html
Copyright © 2011-2022 走看看