亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何修復 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”類(見上文)正確更改?,F在我的問題是,當我打印它時,record.time 無法正常工作,例如,如果我的數組中有兩個對象,它會在控制臺記錄我兩次。所以它沒有正確地改變到它的記錄。時間它只是變化得非???,隨著時間的流逝,它顯示了我的記錄中非??焖俚难h。這是為什么?我怎樣才能正確設置它,以便當我獲得一條記錄時,它的間隔將是 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 關注
  • 119 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號