Question

我是新来的，请你好好的。

我正在开发我的一个小爱好项目，其中一个应用程序收集遥测，记录并以60Hz保存（因此每秒60个索引在一个数组中）。情况总是这样。

然后，我想以常规速度“播放”此阵列，就好像您正在播放视频一样。但是，我没有看到视频，而是希望显示您在前端的每个索引的当前数据。

数组的结构尚未制作，但我假设我只是在数据库中的某处存储和加载JSON文件。这应该在我的前端进行。我已经使用Angular（6）来构建它，所以如果它可以与Angular混合（跟踪你现在的索引进度，并将当前索引的值绑定到前端）会很棒

对于indexx使用0-1-2-etc，或者像timestamps这样的东西会很容易吗？

欢迎任何建议。这里最重要的是保持快速，所以你不需要一个强大的装备来发挥它。

提前致谢！

Answer 1

您需要使用setInterval函数，您将根据频率迭代数组。因此，如果您的频率为60hz，则表示您希望在每1000 / 60毫秒后迭代到数组中的下一个元素

var data = [1, 2, 3, 4, 5]

var currentIndex = 0;

var interval = 1000 / 60

var id = setInterval(function() {
  // do your thing
  if(currentIndex == (data.length-1)) {
    clearInterval(id)
  } else {
    currentIndex++
  }
}, interval)

这不是一个特别迭代的数组，而是在一段时间之后做一些动作，然后移动到下一个项目，当你完成数组时，这将清除间隔。也许链表比这里的数组更有用

Answer 2

你可以让自己成为这种事情的简单跑步者。它基本上是一个游戏引擎，你需要一个游戏循环：）

这是一个天真的例子。在此处跳过大部分错误检查和验证以进行酿造。

bitbake

现在这是一个示例用法。您可以复制代码（上面的类和下面的代码块）并将其粘贴到StackOverflow上的控制台中以查看它的工作情况。你可能想做其他事情，但你会得到要点。

class TelemetryPlayer {
  constructor(items, render, interval) {
    // setup local data. 
    this.interval = interval;
    this.items = items;
    this.render = render;
    this.startLoop();
  }

  // Loop simply initializes before the first run, and then runs the loop.
  // Other places do the actual work. 
  startLoop() {
    this._renderInProgress = false;
    this._currentIndex = 0;
    // save the interval reference if you wanna pause/reset later on.
    this._interval = setInterval(this.doWork.bind(this), this.interval);    
  }

  // here we perform the actual render.
  doWork() {
    if (this._renderInProgress) {
      // previous render has not completed yet.
      console.log('skip');
      return;
    }
    console.log('Tick');
    this._renderInProgress = true;
    const item = this.items[this._currentIndex];
    console.log('Tick');

    // now, call your renderer, and update stuff when complete.
    this.render(item)
      .then(() => {
        // Or this can be a callback or similar.
        this._renderInProgress = false;
        // Ready next item. Do not go out of array bounds.
        this._currentIndex++;
        if (this._currentIndex === this.items.length) {
          this._currentIndex = 0;
        }
      });
  }

  // You can then add fun things like skip, pause, reset etc.
  skip(item)  {
    if (item < 0 || item > this.items.length) {
      return;
    }
    // pause first
    this.pause();
    this._currentIndex = item;
    this.unpause();
  }
  //
  reset() {
    this.skip(0);
  } 
  //
  pause() {
    this._interval = clearInterval(this._interval);
  }

  unpause() {
    if (!this._interval) {
      this._interval = setInterval(this.doWork.bind(this), this.interval);    
    }
  }

  // you can even add items later
  addItem(item) {
    this.items.push(item);
  }

  // or replace them.
  replaceItem(item, index) {
    this.items[index] = item;
    // show the new item right away.
    this.skip(index);
  }

  // or add an item to be played just once.
  playOnce(item) {
    this.pause();
    this.render(item);
    this.unpause();
  }
}

在Javascript

2 个答案: