Question

我正在使用setTimeout在2秒后将身体的可见性更改为“隐藏”，我想在2秒后将其恢复为可见状态，但是我处于刻度功能，因此每10次被称为秒，它没有达到我的期望：

AFRAME.registerComponent("listener", {
    tick: function() {
        setTimeout(() => {
                document.querySelector("body").style.visibility = "hidden";
        setTimeout(() => {
                document.querySelector("body").style.visibility = "visible";
            },2000) 
        },2000)
    }
}

<html>
  <head>
    <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
  </head>
  <body>
        <a-scene>
          <a-plane position="0 0 0" width="14" height="14"></a-plane>
        </a-scene>
  </body>
</html>

任何解决方案吗？

Answer 1

那是因为您正在AFRAME的 tick 处理程序中调用setTimout函数-这又意味着它将在每一帧中反复调用。

如果您希望某件事只发生一次，则 init 处理程序是正确的位置。

AFRAME.registerComponent("listener", {
    init: function() {
        setTimeout(() => {
                document.querySelector("body").style.visibility = "hidden";
        setTimeout(() => {
                document.querySelector("body").style.visibility = "visible";
            },2000) 
        },2000)
    }
}

Answer 2

由于滴答声每秒运行90次。如果要继续使用，请尝试以下操作。

const body = document.querySelector("body");
const hide = () => {
   if(body.style.visibility !== "hidden") {body.style.visibility = "hidden";}}
const show = () => {
   if(body.style.visibility !== "visible") {document.querySelector("body").style.visibility = "visible";}}
const letsFlick = (start, now) => {
  if(!start) { start = new Date(); }
  now = new Date();
  if(now - start >= 2000) {
    hide();
    if(now - start >= 4000) {
      show();
      start = new Date();
    }
  }
}
let start; 
let now;
AFRAME.registerComponent("listener", {
    tick: function() {
      letsFlick(start, now);
    }
}

您可能会说循环会浪费大量的运行时资源，如果您只想按@obscure的答案轻拂一次，则可能要使用init。

使用刻度功能的setTimout中的A-FRAME setTimeout

2 个答案: