如何从 getBoundingClientRect 中的 Promise Result Object 获取特定值?

How to get specific value from Promise Result Object in getBoundingClientRect?

这是我返回 Promise 的代码的一部分,我正在使用 getBoundingClientRect Async,因为它在 AMP 虚拟 DOM(amp-script)中运行:

JS:

    button.addEventListener("mouseenter", function(event){
    
       let target = event.target;

       let coords = target.getBoundingClientRectAsync();
       
       console.log(coords);

    });

控制台日志:

Promise {<pending>}
__proto__: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: Object
bottom: 366
height: 38
left: 225
right: 352.234375
top: 328
width: 127.234375
x: 328
y: 225
__proto__: Object

如何从对象 Promise Result 中获取 left 的值? coords.left; returns 未定义

如果 getBoundingClientRectAsync returns 一个承诺,那么你可以使用 async / await 来获取价值。

button.addEventListener("mouseenter", async function(event){
  let target = event.target;
  let coords = await target.getBoundingClientRectAsync();
  console.log(coords.left);
});

或者使用返回的 Promise 的 then 方法并设置一个回调,当 Promise 解析时,您的 coords 对象可用。

button.addEventListener("mouseenter", function(event){
  let target = event.target;
  target.getBoundingClientRectAsync().then(coords => {
    console.log(coords.left);
  });
});

了解有关 Promises 的基础知识 here on MDN