Libellés

Javascript : Set Timeout et set Interval

Cet article va vous présenter les méthodes setInterval et setTimeout dans Javascript.

Il y aura un exemple pour chaque méthode.

La méthode setInterval

Vous pouvez écrire le code suivant :

var interval = setInterval(function () {
  /*Cette fonction s'exécutera TOUTES les 2 secondes (2000 millisecondes)*/
  console.log("Toutes les 2 secondes !");
}, 2000);

La fonction affichera un message dans la console toutes les 2 secondes (2000 millisecondes).

Vous pouvez modifier le nombre de millisecondes.

Vous pouvez supprimer interval comme ceci : 

clearInterval(interval);

Exemple d'utilisation de setInterval

Cet exemple vous montre comment animer du texte avec la méthode setInterval.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
</head>
<body>

  <p id="js-para"></p>

  <script>

    var nb = ["1", "2", "3", "4", "5"];

    var i = 0;

    var interval = setInterval(function () {
       if(i >= nb.length)
       i = 0;

       $("#js-para").fadeOut(1000,function() {
          $(this).text(nb[i]);
          i++;
       }).fadeIn(1000);

    }, 100);

</script>

</body>
</html>

La méthode setTimeout

Vous pouvez écrire le code suivant :

var timeout = setTimeout(function () {
/*Cette fonction s'exécutera DANS 1 seconde (1000 millisecondes)*/
console.log("1 seconde !");
}, 1000);

La fonction affichera un message dans la console une seconde (1000 millisecondes) après le chargement de la page.

Vous pouvez modifier le nombre de millisecondes.

Vous pouvez supprimer le timeout comme ceci : 

clearTimeout(timeout);

Exemple d'utilisation de setTimeout

Cet exemple vous montre comment afficher une fenêtre modale Bootstrap au bout d'un certain temps (ici 3 secondes) avec la méthode setTimeout.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>

  <div id="myModal" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Super promo</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          <p>Profitez de cette promotion</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary">Acheter</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Non merci</button>
        </div>
      </div>
    </div>
  </div>

  <script>

var timeout = setTimeout(function () {
  $('#myModal').modal('show');
}, 3000);

</script>

</body>
</html>
Envoyer l'article par e-mail
Libellés :

Commentaires

Enregistrer un commentaire