快捷導(dǎo)航

vue中輪訓(xùn)器的使用

更新時(shí)間：2019年01月27日 11:27:02 作者：Moment°回憶

今天小編就為大家分享一篇關(guān)于vue中輪訓(xùn)器的使用，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧

核心代碼：

<template>
  <div >
   {{log}}
  </div>
</template>
<script>
  export default {
    name: "TrainingInRotation",
   data(){
    return {
     log:0,
     timerId:1, // 模擬計(jì)時(shí)器id，唯一性
     timerObj :{}, // 計(jì)時(shí)器存儲(chǔ)器
    }
   },
   created(){
     this.startTraining();
   },
   methods: {
    /*
   * 開始輪訓(xùn)
   * */
    startTraining() {
     let this_ = this;
     const id = this.timerId++
     this.timerObj[id] = true
     async function timerFn() {
      if (!this_.timerObj[id]) return
      await this_.getData();
      setTimeout(timerFn, 1 * 1000)
     }
     timerFn();
    },
    /*
    * 停止輪訓(xùn)
    * */
    stopTime() {
     this.timerObj = {}
    },
    /*
    * 要輪訓(xùn)的代碼
    * */
    getData(){
     this.log+=1;
     console.log("this.log:"+this.log);
    }
   },
   destroyed(){
    this.stopTime();
   }
  }
</script>
<style scoped>
</style>

效果圖：

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請(qǐng)查看下面相關(guān)鏈接

您可能感興趣的文章:

相關(guān)文章

vue elementui el-form rules動(dòng)態(tài)驗(yàn)證的實(shí)例代碼詳解
在使用elementUI el-form 中，對(duì)于業(yè)務(wù)不同的時(shí)候可能會(huì)產(chǎn)生不同表單結(jié)構(gòu)，但是都是存在同一個(gè)表單控件el-form中。這篇文章主要介紹了vue elementui el-form rules動(dòng)態(tài)驗(yàn)證的實(shí)例代碼,需要的朋友可以參考下
2019-05-05
vue 使用eventBus實(shí)現(xiàn)同級(jí)組件的通訊
這篇文章主要介紹了vue 使用eventBus實(shí)現(xiàn)同級(jí)組件的通訊,需要的朋友可以參考下
2018-03-03
用Vue.js在瀏覽器中實(shí)現(xiàn)裁剪圖像功能
在本教程中，我們將探討如何在瀏覽器中使用 JavaScript 庫來操作圖片，為服務(wù)器上的存儲(chǔ)做準(zhǔn)備，并在 Web 程序中使用。我們將使用 Vue.js 而不是原生 JavaScript來完成此操作,需要的朋友可以參考下
2019-06-06
vue數(shù)據(jù)更新UI不刷新顯示的解決辦法
這篇文章主要介紹了vue數(shù)據(jù)更新UI不刷新顯示的解決辦法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
Vue中的反向代理
這篇文章主要介紹了Vue中的反向代理，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-01-01
vue動(dòng)態(tài)綁定ref(使用變量)以及獲取方式
這篇文章主要介紹了vue動(dòng)態(tài)綁定ref(使用變量)以及獲取方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
如何使用Vue進(jìn)行文件預(yù)覽與打印功能
這篇文章主要給大家介紹了關(guān)于如何使用Vue進(jìn)行文件預(yù)覽與打印功能的相關(guān)資料,這個(gè)功能其實(shí)也是自己學(xué)習(xí)到的,做完也有一段時(shí)間了,一直想記錄總結(jié)一下,需要的朋友可以參考下
2023-10-10
Vue組件庫發(fā)布到npm詳解
本片文章給大家詳細(xì)介紹了如何將Vue組件庫發(fā)布到npm的方法以及代碼示例分享，感興趣的朋友參考學(xué)習(xí)下。
2018-02-02
一文詳解Vue的響應(yīng)式原則與雙向數(shù)據(jù)綁定
使用 Vue.js 久了，還是不明白響應(yīng)式原理和雙向數(shù)據(jù)綁定的區(qū)別？今天，我們就一起來學(xué)習(xí)一下，將解釋它們的區(qū)別，快跟隨小編一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
Vue混入與插件的使用介紹
這篇文章主要介紹了Vue混入與插件的使用，mixins（混入），官方的描述是一種分發(fā) Vue 組件中可復(fù)用功能的非常靈活的方式，mixins是一個(gè)js對(duì)象，它可以包含我們組件中script項(xiàng)中的任意功能選項(xiàng)，如data、components、methods 、created、computed等等
2022-09-09