Loop an array with timer in Vue.js

This entry was posted in Vue.js on 2020-04-09 by Eddy
162 Vue.js

For a project , I wanted to loop an array with a different duration between each element.

This is how I did it using async / await in Vue js

export default {
  data(){
    return {
      events: [
       {duration: 3000, name: 'event 1'},
       {duration: 5000, name: 'event 2'},
       {duration: 2000, name: 'event 3'}
      ],
    };
  },
  methods:{
    delay: duration => {
      return new Promise(resolve => {
        setTimeout(resolve, duration);
      })
    },
    loop: async function() {
      for (let i = 0; i < this.events.length; i++)
        {
            console.log(this.events[i].name)
            await this.delay(this.events[i].duration)
        }
        console.log("Re Loop")
        this.loop()
     },
  },
  created(){
    this.loop()
  }
};


Comments

No results found.

Write comments

Math, for example, 45-12 = 33

Subscribe Now

You will receive a notification to each new article.

Tag Cloud

  • Composer
  • Yii2
  • OpenGraph
  • Helper
  • Wordpress
  • PhpMyAdmin
  • .htaccess
  • Config
  • Production
  • Git
  • Api
  • Mailchimp
  • Github
  • Vue.js