如何修复 setInterval 错误？

Question

我有一个带 v-for 的 h1，我正在从我的数组中写出一些东西，它看起来像这样：

 <h1
        v-for="(record, index) of filteredRecords"
        :key="index"
        :record="record"
        :class="getActiveClass(record, index)"
      >
        <div :class="getClass(record)">
         
          <strong v-show="record.path === 'leftoFront'"
            >{{ record.description }}
          </strong>
          
        </div>
      </h1>

如你所见，我正在绑定一个 class（getActiveClass(record,index) --> 将我的记录和索引传递给它）

这是我的 getActiveClass 方法：

getActiveClass(record, index) {
      this.showMe(record);

      return {
        "is-active": index == this.activeSpan
      };
    }

我正在调用一个名为 showMe 的函数，将我的记录传递给它，这就是问题开始的地方 showMe 方法适用于我的 setInterval，所以基本上它的作用是我的数组中有多个对象，它正在设置时间间隔，因此当一条记录的 record.time 结束时，它会切换到下一条记录。看起来像这样：

 showMe(record) {
     console.log(record.time)
      setInterval(record => {

        if (this.activeSpan === this.filteredRecords.length - 1) {
          this.activeSpan = 0;
        } else {
          this.activeSpan++;
        }
      }, record.time );
    },

此 activeSpan 正在确保 'is-active' class（见上文）正确更改。

现在我的问题是 record.time 在我打印出来时无法正常工作，例如，如果我的数组中有两个对象，它会在控制台记录我两次。所以它没有正确地改变到它的 record.time 它只是改变得非常快，随着时间的推移它显示我的记录中的循环非常快。

这是为什么？我怎样才能正确设置它，以便当我得到一条记录时，它的间隔将是 record.time （属于它的），当一条记录发生变化时，它再次做同样的事情（听它的 record.time)

例如：

filteredRecords:[
{
description:"hey you",
time:12,
id:4,
},
{
description:"hola babe",
time:43,
id:1
},


]

它应该首先显示“嘿你”文本，它应该显示 12 秒，然后它应该显示“hola babe”43 秒。

谢谢

Answer 1

<template>
  <h1 ...>{{ filteredRecords[index].description }}</h1>
</template>

<script>
{
  data() {
    return {
      index: 0,
      // ...
    };
  },

  methods: {
    iterate(i) {
      if (this.filteredRecords[i]) {
        this.index = i;
        window.setTimeout(() => iterate(i + 1), this.filteredRecords[i].time * 1000);
      }
    },
  },

  mounted() {
    this.iterate(0);
  },
}
</script>

这个怎么样？不使用 v-for.

如何修复 setInterval 错误？

How to fix setInterval bugg?

javascript

settimeout

setinterval

vue.js