Exécuter du code JavaScript de manière répétée avec setInterval

Publié le 06/05/2020 • Mis à jour le 06/05/2020


English language detected! 🇬🇧

  We noticed that your browser is using English. Do you want to read this post in this language?

Read the english version 🇬🇧 Close

Cette fonction est la petite soeur de setTimeout que nous avons vue dans le snippet précédent. Cette fois setInterval va nous permettre d'exécuter du code de manière répétée avec un certain délai grâce à un snippet ou un callback. Cliquez sur le bouton commencer pour afficher un message dans la console toutes les secondes. Puis appuyez sur le bouton arrêter afin de stopper l'exécution. J'ai ajouté un nombre aléatoire afin d'avoir une sortie distincte à chaque appel de la fonction.


Démo HTML du snippet

/**
 * J'utilise un module JavaScript afin d'isoler chaque snippet dans un fichier.
 * C'est en fait un mixin Vue.js. Utilisez le code appelé par la fonction mounted()
 * ou snippetXX().
 */
export default {
  data: {
    interval: null
  },
  methods: {
    snippet89 () {
      console.log('Starting interval...')
      this.interval = setInterval(function () {
        console.log('Hello world! 🐝 > ' + Math.random())
      }, 1000)
    },
    stopSnippet89 () {
      console.log('Interval stopped.')
      clearInterval(this.interval)
    }
  }
}

 Plus sur Stackoverflow   Lire la doc  Snippet aléatoire