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>
Commentaires
Enregistrer un commentaire