在调用回调之前,如何等待异步创建的对象完全可用?

2024-03-25

我正在尝试创建一个可以创建新标记的函数。我需要能够在回调中处理新标记的一些属性。问题是marker立即创建并可用于调用回调,但某些属性尚不可用。

如果我在尝试访问属性之前等待两秒钟,它就可以正常工作 - 这使我相信该对象在创建后仍在异步生成自身。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple markers</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>

function initMap() {
  var latLng = new google.maps.LatLng(-25.363, 131.044);

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: latLng
  });

  function placeMarker(map, latLng, callback, callback2){
        var marker = new google.maps.Marker({
            position: latLng,
            map: map });

        callback(marker);
        callback2(marker);
    }

    placeMarker(map, latLng, function(marker){
        setTimeout( function(){ 
            console.log(marker.Xg.Oa)
        }, 2000);
    }, function(marker){
        console.log(marker.Xg.Oa);
    });

}
    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"></script>
  </body>
</html>

在这个例子中回调:

setTimeout( function(){ 
    console.log(marker.Xg.Oa)
}, 2000);

产生正确的响应。但是不等待的回调显示未定义的错误:

function(marker){
    console.log(marker.Xg.Oa);
}

我在这里使用 Google Maps Javascript API 库,并且由于显而易见的原因,不能选择乱搞 google.maps 的内容。我想将整个对象传递给回调,但我需要确保 latLng 信息(marker.Xg.Oa) 在调用它之前就存在。在调用回调之前如何确保它存在?


注意:我还没有测试过这个,但是沿着这些思路......

var map = //...
var latLng = //...

function placeMarker(map, latLng, callback){

    return new Promise(function(resolve, reject)(){

        getMarker().then(function(marker){
            //The marker is immediately available
            console.log(marker); //me {__gm: Object, ... }

            //Try to get the value we need
            console.log(marker.Xg.Oa); //Uncaught TypeError: Cannot read property 'Oa' of undefined

            //wait two seconds and try again
            setTimeout(function(){ console.log(marker.Xg.Oa) }, 2000); // L {} (this is the expected output)

            while(!marker.Xg.Oa){ //Uncaught TypeError: Cannot read property 'Oa' of undefined
                callback(marker.Xg.Oa);
            }

            resolve(true);
        });
    });

}

function getMarker()
{
    return new Promise(function(resolve, reject){
        var marker = new google.maps.Marker({
            position: latLng,
            map: map 
        });

        resolve(marker);
    });
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在调用回调之前,如何等待异步创建的对象完全可用? 的相关文章

  • Webpack 编译的 Chrome 扩展抛出 `unsafe-eval` 错误

    使用 Webpack 编译后重新加载 Chrome 扩展时出现此错误 Uncaught EvalError Refused to evaluate a string as JavaScript because unsafe eval is
  • 如何将正文中的数字替换为波斯数字?

    我想将 html 内容中的每个数字转换为波斯数字 而不会对页面元素产生其他影响 例如 div style color c2c2c2 text number 1 span text number 2 span div text number
  • CSS 文本装饰:反向

    我很惊讶 CSS 中没有 text decoration reverse 因为使用 JavaScript 来实现似乎非常尴尬 IE 将元素的前景色和背景色分别设置为父元素的背景色和前景色 我注意到了 JavaScript 技术here ht
  • readFile() 和 readFileSync() 之间的区别

    以下代码将index html 的内容 仅包含文本hello world 输出到浏览器 然而 当我更换readFile with readFileSync 请求超时 我缺少什么 是否需要不同类型的缓冲区 我使用的是node 0 61 和ex
  • JavaScript:解决意外字符“#”

    介绍 我的 React 应用程序可以执行npm run build在开发模式下 webpack config dev js 但不在生产模式下 webpack config prod js 抛出以下错误 Module parse failed
  • 处理量角器中的未知错误

    我有一个protractor通过配置多个浏览器进行设置multiCapabilities 在 browserstack 上运行测试 我的主要量角器规格 测试之一包含以下内容afterEach block afterEach function
  • Javascript RegEx 替换所有不在 HTML 标签内的字符

    寻求一些帮助 我的正则表达式有点生锈 我试图用一个字符替换 javascript 中 HTML 标签之外的所有字符 例如 用破折号 替换这些字符 div class test Lorem Ipsum br Dolor Sit Amet di
  • 现在 JavaScript 的无限循环会导致浏览器崩溃吗?

    我正在学习 JavaScript 对编程很陌生 碰巧遇到了这些无限循环 据说这些循环会永远持续下去并使浏览器崩溃 但是当我用这些代码创建一个循环时 i 0 while i lt 10 document write i 浏览器只是继续加载它
  • 如何在 React JS 组件中预加载图像?

    我目前正在渲染一个子组件signInError发生 这signInError存储在父组件中 如果不为 null 则渲染
  • 从 json 创建下拉列表

    我有一个这种形式的 json COLUMNS ID Name DATA 1 Joe 2 Sam 3 Doug 我正在寻找一个如何在 javascript 中从该数据创建下拉列表的示例 但 json dropdown 列表的所有示例 json
  • 规则和夏令时

    我在用着rrule https github com jakubroztocil rrule在我的数据库中创建和存储事件 一切正常 直到我发现我的重复事件与 3 月 31 日之后有一个小时的差异 在法国 这一天我们进行夏令时更改 实际上 我
  • 获取 Html.TextBoxFor 字段的 HTML id

    有没有办法在 Javascript 中获取 ASP NET MVC 控件生成的客户端 ID Html TextBoxFor m gt m Name 像这样 Html IdFor m gt m Name
  • 计算网站上多个文件的下载次数的最佳方法[关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 问题是 计算网站上多个文件的下载次数的最佳方法 我正在尝试做的事情 跟踪并统计多个文件的下载数量 对于具有不同扩展名的文件 foo z
  • 更改 jQuery 中链接的标题

    我有一个 id 为 helpTopicAnchorId 的链接 我想在 jQuery 中更改其文本 我该怎么做呢 helpTopicAnchorId text newText P S the jQuery 文档 http docs jque
  • Electron 中的收据热敏打印机

    我需要找到一种在 javascript 中打印收据的方法Electron 我已经尝试过了QZ TRAY但由于 Electron 它不起作用 我也尝试过节点热敏打印机但它也从来没有对我有用 这里有人知道如何在 javascript Elect
  • 现已弃用使用 Google Places API 获取多种类型

    谷歌最近宣布 自 2016 年 2 月 16 日起 types 参数已被弃用 取而代之的是新的类型参数 每个搜索请求仅支持一种类型 我的问题是 现在有什么方法 不使用已弃用的参数 从单个 API 调用中获取多个地点类型吗 谢谢 None
  • 使用“onclick”和 JavaScript 获取按钮上的 X/Y 坐标

    我是一名 JavaScript 初学者 正在寻找一种方法来获取单击按钮时的 x 和 y 坐标 这适用于 Opera IE9 和 Chrome 但我无法让它在 Firefox 中工作 到目前为止 这是我的代码 JavaScript 中的函数
  • datatables.search 函数修改后的奇怪行为

    这个问题是后续问题这个问题 https stackoverflow com questions 54671211 overriding datatables js search behavior 我已经创建了这个 JSFiddle http
  • 所有人共享的 First Load JS 在 next.js 中相当重

    I have a project on Next js framework and the problem is that First Load JS shared by all pages is rather heavy I want t
  • 将变量从 PHP 传递到 JavaScript 的有效方法[重复]

    这个问题在这里已经有答案了 有时我必须将一些变量从 PHP 传递到 JS 脚本 现在我是这样做的 var js variable 但这非常丑陋 我无法在 js 文件中隐藏我的 JS 脚本 因为它必须由 PHP 解析 处理这个问题的最佳解决方

随机推荐