VIP用户交流群:462197261 收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
在线客服:78895949
tonglan
  • 当前位置:
  • javascript异步处理与Jquery deferred对象用法总结

    本文实例讲述了javascript异步处理与Jquery deferred对象用法。分享给大家供大家参考,具体如下:

    这是项目组老大整理的一些关于jquery 异步处理请求,以及使用 jquery deferred 对象的一些常见方法。虽然是项目上总结出来的。但也比较通用,分享在这里。

    • 所有的Ajax操作都采用异步处理。
    • 采用Jquery的Deffered对象来处理异步调用。
    • 因为是异步调用,所以$.Ajax函数的返回值不代表返回的结果,只是一个Deffered对象。
    • Ajax调用完成后执行的逻辑可以写成函数作为参数传递给Deffered对象的done(), fail(), always()函数来执行。
    • 如果一个函数包含Ajax调用,那么这个函数必须将Ajax返回的异步对象作为自己的返回值,否则函数的调用者无法保证后续代码的正常执行顺序。

    例如:

    function readData(){
      $.ajax({ url:"test", dataType:"json" })
      .done(function() {
        //....
      });
    }
    readData();
    //...这里想添加一些后续处理,但程序将在Ajax回调前执行,所以无法达到预期目的
    正确的代码:
    function readData(){
      return $.ajax({ url:"test", dataType:"json" })
      .done(function() {
        //....
      });
    }
    readData().done(function () {
      //...想添加的后续处理可以加在这里处理
    });
    
    
    • 如果需要调用多个Ajax请求,请注意Ajax请求是否可以同时进行,如果可以应该使用when()函数来同时执行,以提高程序的运行效率和可读性。
    • deferred对象有一个方法promise(),可以阻止其他代码修改deferred对象的状态,也就是其他代码调用reslove()reject()无效。
    var dtd = $.Deferred(); // 新建一个Deferred对象
    var wait = function(dtd){
      var tasks = function(){
        alert("执行完毕!");
        dtd.resolve(); // 改变Deferred对象的执行状态
      };
      setTimeout(tasks,5000);
      return dtd;
    };
    wait(dtd)
    .done(function(){ alert("成功了!"); })
    .fail(function(){ alert("出错啦!"); });
    dtd.resolve();  //这里修改了dtd对象的状态,导致立刻出现“成功了!”的提示
    
    

    正确的例子:

    var dtd = $.Deferred(); // 新建一个Deferred对象
    var wait = function(dtd){
      var tasks = function(){
        alert("执行完毕!");
        dtd.resolve(); // 改变Deferred对象的执行状态
      };
      setTimeout(tasks,5000);
      return dtd.promise(); // 返回promise对象
    };
    wait(dtd)
    .done(function(){ alert("成功了!"); })
    .fail(function(){ alert("出错啦!"); });
    dtd.resolve();  //这里修改dtd对象的状态无效
    
    
    • 一些情况的处理:

    1.嵌套异步操作的处理。

    如果一个函数内部执行异步任务,并且在异步任务的done回调内会嵌套另一个异步任务,那么简单返回第一个异步任务的返回值是不行的,需要另外自行定义一个Deferred对象作为返回值。

    function loadComponent(id){
      var dtd = $.Deferred();
      //loadScript将异步加载一个js文件,所以返回值是一个Deffered对象
      return loadScript(id)
      .done(function() {
        //js加载后,触发component的load事件,此事件内将使用Ajax获取页面模板和数据,生成最终的html
        app.getComponent(id).trigger("load")
        .done( function(){
          dtd.reslove(agruments);
        }).fail( function(){
          dtd.reject(agruments);
        });
      });
      //返回自定义的dtd对象,才能保证返回值的done回调在load事件完成后执行
      return dtd;
    }
    
    

    2.一个函数内同时包含同步和异步case的处理。

    /* 这个函数返回一个异步对象,当异步对象执行done时,表示component被加载完成 */
    function requireComponent(id){
      if (this.components[id]){
        //如果component已经被加载,直接返回一个reslove的异步对象,否则返回值内容与else分支不同,后续代码难以处理
        var dtd = $.Deferred();
        dtd.reslove(this.getComponent(id));
        return dtd;
      }
      else{
        //如果component未被加载,loadScript将异步加载JavaScript并执行,然后将被加载的component放入this.components
        return loadScript(id);
      }
    }
    
    
    • Jquery异步模型有一个缺点,就是缺乏类似wait操作的处理能力,如果多个异步调用要顺序发生时,就要在done里面嵌套处理,影响代码可读性.
    aSyncTask1.done( function () {
      //...第一个操作完成后的处理
      asyncTask2.done( function () {
        //...第二个操作完成后的处理
        asyncTask3.done( function () {
          //...第三个操作完成后的处理
        });
      })
    })
    
    

    更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery form操作技巧汇总》、《jQuery文件与目录操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery扩展技巧总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

    希望本文所述对大家jQuery程序设计有所帮助。

    您可能感兴趣的文章:

    • jQuery Ajax异步处理Json数据详解
    • 详谈 Jquery Ajax异步处理Json数据.
    • jQuery的deferred对象使用详解
    • 利用jQuery的deferred对象实现异步按顺序加载JS文件
    • jQuery.deferred对象使用详解
    • jQuery通过deferred对象管理ajax异步
    • 以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
    • jQuery的promise与deferred对象在异步回调中的作用
    • jQuery中deferred对象使用方法详解
    • jQuery的deferred对象详解

    广而告之:
    热门推荐:
    php给图片添加文字水印方法汇总

    1: 面向过程的编写方法 //指定图片路径 $src = '001.png'; //获取图片信息 $info = getimagesize($src); //获取图片扩展名 $type = image_type_to_extension($info[2],false); //动态的把图片导入内存中 $fun = "imagecreatefrom{$type}"; $image = $fun('001.png'); //指定字···

    vue车牌号校验和银行校验实战

    在看这篇文章之前,我建议大伙可以去把项目demo拉到本地看看。如果觉得写得不好,可以一起提提issues,一起维护。或者大伙有刚需,可以留言,后期会不断完善。 使用方法: git clone https://github.com/13725102796/css3-demo.git cd css3-demo npm i (yarn install) npm sta···

    JavaScript 通过Ajax 动态加载CheckBox复选框

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <pre name="code" class="html"> <div class="controls" id="compareyear"> </div></pre><br> <img src="http://img.blog.csdn.net/20170830165326131?watermark/2/text/aHR0c···

    不可不知的HTML优化技巧

    如何提升Web页面的性能,很多开发人员从多个方面来下手如JavaScript、图像优化、服务器配置,文件压缩或是调整CSS。 很显然HTML 已经达到了一个瓶颈,尽管它是开发Web 界面必备的核心语言。HTML页面的负载也是越来越重。大多数页面平均需要40K的空间,像一些大型网站会包含数以···

    jQuery实现的表格前端排序功能示例

    本文实例讲述了jQuery实现的表格前端排序功能。分享给大家供大家参考,具体如下: 表格前端按列排序 依赖jQuery(本例使用jQuery-1.8.2) 1.初始化方法 (function($){ //插件 $.extend($,{ //命名空间 sortTable:{ sort:function(tableId,Idx){ var t···

    织梦文章keywords关键词字数限制修改方法

    最近在发布文章的时候发现文章关键词字数会有限制,如果填多了会自动截取,原来dedecms的关键字默认限制是60个字符也就是30个关键字,下边教您如何修改织梦程序关键字的字数限制,不管是新建网站还是老网站使用dedecms程序建议修改此项,本人亲测可行! 第一步 ···

    PHP实现接收二进制流转换成图片的方法

    本文实例讲述了PHP实现接收二进制流转换成图片的方法。分享给大家供大家参考,具体如下: 这里实现php 接收二进制流转换成图片,所使用的图片类imageUpload.php如下: <?php /** * 图片类 * @version 1.0 * * PHP默认只识别application/x-www.form-urlencoded标准的数···

    php文件压缩之PHPZip类用法实例

    本文实例讲述了php文件压缩之PHPZip类用法。分享给大家供大家参考。具体如下: <?php // // PHPZip v1.2 by Sext (sext@neud.net) // // Makes zip archive // // Based on "Zip file creation class", uses zLib // // class PHPZip { function Zip($dir, $zipfilen···

    jQuery EasyUI开发技巧总结

    jQuery EasyUI开发技巧总结 1、使用tabs时,如果使用的不是url,而是content,则要嵌入iframe addTab({ title:node.text, closeable:true, content:‘<iframe src="'+url+'" frameborder="0" style="border:0;width:100%;height:99%"></ifram···

    帝国cms删除分类信息密码

    <?php if($navinfor['password']) { echo "<a href='/e/delnews/fwxx.php?classid=[!--self.classid--]&id=[!--id--]' target='_blank'>删除信息</a>(需密码)"; } ?> 这个文件下的内容 <?php require("../class/connect.php"); include("../clas···