个人中心
gpt4 book ai didi

javascript - $.Deferred 作为成员变量

转载 作者：行者123 更新时间：2023-12-03 05:02:10 24 4
gpt4 key购买 nike

凭借面向对象语言的背景，我正在尝试学习一些 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

最佳答案

一些问题:

  • 您在某些地方引用了错误的对象/变量(this.def 不存在、this.defThis 和 defVar > 从未使用过)

  • this 未在超时回调函数中定义(或者是 window 处于草率模式)，因此您需要为此使用解决方案(有几种可能性，例如绑定(bind))

  • 你永远不会解析defVar

  • 您使用一个 isdone 变量，因此请注意，一旦将其设置为 true，它就会保持 true 并且几乎不表示任何信息其他 promise 。

这里是更正后的代码(简化:省略文档内容的更改):

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>

关于javascript - $.Deferred 作为成员变量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42176251/

24 4 0
文章推荐： javascript - io.emit(...) 和循环有什么区别？
文章推荐： javascript - file_put_contents - 包含自定义变量
文章推荐： javascript - Angularjs 在数据准备好时进行评估
文章推荐： javascript - D3 将图像附加到表头的方法
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com