文章/答案/技术大牛

发布

社区首页 >问答首页 >$.Deferred作为成员变量

问$.Deferred作为成员变量
EN

Stack Overflow用户

提问于 2017-02-11 13:10:36

回答 1查看 110关注 0票数 0

有了面向对象语言的背景，我正在尝试学习一些jquery，并将注意力集中在异步调用上。我的目的是创建一个javascript对象，以包含异步api调用的结果，并能够询问所述对象是否已完成加载。

我一直试图使用来自jquery的Deferred来完成这个任务，让代码片段像文档示例中那样工作没有问题，但是当我将Deferred放在类中时，它不会按照我所期望的顺序执行。

如何使用$.Deferred作为成员变量创建javascript对象？

(我所附代码中的超时是模拟api调用中的延迟)

<!DOCTYPE html>
<html>
   <body>
     <script src="jquery-3.1.1.js"></script>
     <script>
        //top level
        var isdone = false;
        var def = $.Deferred();

        $.when(def).done(function() {
          var msg = "checking topLevel isdone " + isdone;
          console.log(msg);
          $("body").append("<p>" + msg + "</p>");
        })

        var delayedCall = function() {
          setTimeout(function() {
            //resolve after 5 seconds
            isdone = true;
            def.resolve();
          }, 1000);
        }
        delayedCall();



        //inside function
        function DelayedObject()
        {
          this.defThis = $.Deferred();
          var defVar = $.Deferred();
          this.delayedObjCall = function()
          {
            setTimeout(function()
            {
              //resolve after 5 seconds
              isdone = true;
              this.def.resolve();
            }, 1000);
          }
          this.delayedObjCall();
          this.getStatusThis = function()
          {
            return this.def;
          }
          this.getStatusVar = function()
          {
            return this.def;
          }
        }

        delObj = new DelayedObject();
        $.when(delObj.getStatusThis() ).done(function() {
          var msg = "checking delObj (this) isdone " + isdone;
          console.log(msg)
          $("body").append("<p>" + msg + "</p>");
        });
        $.when(delObj.getStatusVar() ).done(function() {
          var msg = "checking delObj (var) isdone " + isdone;
          $("body").append("<p>" + msg + "</p>");
          console.log(msg)
        });

        $(window).on("load", function()
        {
          var msg = "<p>" + " Page loaded " + "</p>";
          $("body").append(msg);
          console.log(msg);
        });
      </script>
    </body>
  </html>

结果

checking delObj (this) isdone false

checking delObj (var) isdone false

Page loaded

checking topLevel isdone true

javascript

jquery

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-02-11 13:27:00

一些问题：

您在某些地方引用了错误的对象/变量(this.def不存在，this.defThis和defVar从未使用过)
this不是在超时回调函数中定义的(或者是window处于草率模式)，因此您需要使用解决方案(几种可能性，例如bind)。
你永远不会解决defVar
您使用一个isdone变量，因此请注意，一旦将其设置为true，它将保持为true，并对其他承诺几乎不提。

下面是更正的代码(简化:省略对文档内容的更改)：

var isdone = false;
var def = $.Deferred();

$.when(def).done(function() {
  console.log("checking topLevel isdone " + isdone);
  isdone = false; // set back to false
});

var delayedCall = function() {
  setTimeout(function() {
    isdone = true;
    def.resolve();
  }, 500); // Half a second
}
delayedCall();

//inside function
function DelayedObject() {
  this.defThis = $.Deferred();
  var defVar = $.Deferred();
  this.delayedObjCall = function() {
    setTimeout(function() {
      //resolve after 5 seconds
      isdone = true;
      this.defThis.resolve(); // refer to the correct object
    }.bind(this), 1000); // provide the correct context with bind
    // Also resolve the other deferred:
    setTimeout(function() {
      //resolve after 5 seconds
      isdone = true;
      defVar.resolve();
    }.bind(this), 1500); //... a bit later
  }
  this.delayedObjCall();
  this.getStatusThis = function() {
    return this.defThis; // return correct object
  }
  this.getStatusVar = function() {
    return defVar; // return correct object
  }
}

delObj = new DelayedObject();
$.when(delObj.getStatusThis() ).done(function() {
  console.log("checking delObj (this) isdone " + isdone);
  isdone = false; // set back to false
});
$.when(delObj.getStatusVar() ).done(function() {
  console.log('checking delObj (var) isdone ' + isdone)
  isdone = false; // set back to false
});

$(window).on("load", function() {
  console.log('Page loaded');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42176251

复制

相似问题

问$.Deferred作为成员变量
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问$.Deferred作为成员变量EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问$.Deferred作为成员变量
EN