Question

我是Javascript和异步编程的新手，所以我确信这是一个初学者问题。

我正在使用ThreeJS来构建一个包含多个对象的场景（大约100个），到目前为止一切正常。

现在我试图在特定时间（初始化后）渲染整个场景。因此，只需按一下按钮，我就可以逐个构建场景。为此，我试图使用sleep或setTimeout函数。不幸的是，两个人都不适合我。

public buildPalette() {
    if (!this.initial) {
      for (let i = 0; i < this.numOfItems; i++) {
        this.scene.remove(this.mesh[i + 1]);
      }
      this.initial = true;
    }
    if (this.initial) {
      for (let i = 0; i < this.numOfItems; i++) {
        console.log(i);
        this.sleep(100);
        this.scene.add(this.mesh[i + 1]);

    }
  }

所以在这里我首先从场景中移除所有对象，然后我想每隔100ms逐个对象地构建场景。

我使用了以下睡眠功能：

public sleep(milliseconds) {
    const start = new Date().getTime();
    for (let i = 0; i < 1e7; i++) {
      if ((new Date().getTime() - start) > milliseconds) {
        break;
      }
    }
  }

当执行代码（Angular with Chrome）时，首先发生的事情是睡眠功能将被执行100次，然后场景将被清除，然后最初再次建立。我希望先将其清除，然后逐步建立起来。

我也尝试使用setTimeout（）函数：

setTimeout(function() {
          this.scene.add(this.mesh[i + 1]);
        }, 100);

我刚用buildPalette（）函数中的上述超时代码替换了this.sleep(100);。

然而，这也不行。我在这里得到以下错误：

TypeError：无法读取属性＆＃39;添加＆＃39;未定义的

所以在我看来，这里的场景对象不再被定义了。

我非常感谢你的帮助。

Answer 1

小心范围。使用setTimeout时，它需要一个函数作为参数。此函数具有单独的范围，“this”将在函数内部。你必须将它设置为另一个变量才能访问真正的“this”：

var _this = this;
setTimeout(function() {
   _this.scene.add(_this.mesh[i + 1]);
}, 100);

Answer 2

您需要调用setTimeout，使用()=>{}代替function(){}

setTimeout(() => {
   this.scene.add(this.mesh[i + 1]);
}, 100);

您可以阅读 HERE

使用sleep / setTimeout函数的异步javascript行为（THREEJS和Angular）

2 个答案: