为了账号安全,请及时绑定邮箱和手机立即绑定

如何修复 setInterval 错误?

如何修复 setInterval 错误?

人到中年有点甜 2022-12-22 12:52:22
我有一个带 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>如您所见,我绑定了一个类(getActiveClass(record,index) --> 将我的记录和索引传递给它)这是我的 getActiveClass 方法:getActiveClass(record, index) {      this.showMe(record);      return {        "is-active": index == this.activeSpan      };    }我正在调用一个名为showMe的函数,将我的记录传递给它,这就是问题开始的地方 showMe 方法是针对我的 setInterval 所以基本上它的作用是我的数组中有多个对象并且它正在设置间隔所以当记录.该记录的时间结束,然后切换到下一个记录。看起来像这样: 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”类(见上文)正确更改。现在我的问题是,当我打印它时,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 秒。
查看完整描述

1 回答

?
开满天机

TA贡献1786条经验 获得超13个赞

<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.



查看完整回答
反对 回复 2022-12-22
  • 1 回答
  • 0 关注
  • 77 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号