Comment définir le délai en javascript
J'ai un morceau de js sur mon site web pour changer d'image, mais il faut un délai lorsque vous cliquez sur l'image une seconde fois. Le délai devrait être de 1000ms. Donc, vous cliquez sur le fichier img.jpg, puis le fichier img_onclick.jpg apparaît. Cliquez ensuite sur l'image img_onclick.jpg. Un délai de 1000 ms devrait s'écouler avant que l'image img.jpg ne s'affiche à nouveau.
Voici le code:
jQuery(document).ready(function($) {
$(".toggle-container").hide();
$(".trigger").toggle(function () {
$(this).addClass("active");
$(".trigger").find('img').prop('src', 'http://localhost:8888/images/img_onclick.jpg');
}, function () {
$(this).removeClass("active");
$(".trigger").find('img').prop('src', 'http://localhost:8888/images/img.jpg');
});
$(".trigger").click(function () {
$(this).next(".toggle-container").slideToggle();
});
});
Utilisez setTimeout():
var delayInMilliseconds = 1000; //1 second
setTimeout(function() {
//your code to be executed after 1 second
}, delayInMilliseconds);
Si vous voulez le faire sans setTimeout: Reportez-vous à cette question .
setTimeout(function(){
}, 500);
Placez votre code à l'intérieur du { }
500 = 0,5 seconde
2200 = 2,2 secondes
etc.
Il existe deux types (généralement utilisés) de fonction de minuterie dans javascript setTimeout et setInterval ( autre )
Ces deux méthodes ont la même signature. Ils prennent en paramètre une fonction de rappel et un temps de retard.
setTimeout ne s'exécute qu'une fois après le délai, alors que setInterval continue d'appeler la fonction de rappel après chaque délai milisecs.
ces deux méthodes renvoient un identifiant entier pouvant être utilisé pour les effacer avant l’expiration du temporisateur.
clearTimeout et clearInterval ces deux méthodes prennent un identifiant entier renvoyé par les fonctions ci-dessus setTimeout et setInterval
Exemple:
alert("before setTimeout");
setTimeout(function(){
alert("I am setTimeout");
},1000); //delay is in milliseconds
alert("after setTimeout");
Si vous exécutez le code ci-dessus, vous verrez qu'il alerte before setTimeout puis after setTimeout et finalement I am setTimeout après 1sec (1000ms)
Ce que vous pouvez remarquer dans cet exemple, c’est que la fonction setTimeout(...) est asynchrone, ce qui signifie qu’elle n’attend pas que le chronomètre s’écoule avant de passer à la déclaration suivante, c.-à-d. alert("after setTimeout");.
Exemple:
alert("before setInterval"); //called first
var tid = setInterval(function(){
//called 5 times each time after one second
//before getting cleared by below timeout.
alert("I am setInterval");
},1000); //delay is in milliseconds
alert("after setInterval"); //called second
setTimeout(function(){
clearInterval(tid); //clear above interval after 5 seconds
},5000);
Si vous exécutez le code ci-dessus, vous verrez qu'il alerte before setInterval, puis after setInterval et finalement il alerte I am setInterval 5 fois après 1sec (1000 ms) car setTimeout efface la minuterie après 5 secondes ou sinon, toutes les 1 secondes, vous recevrez une alerte I am setInterval Infiniment.
Quel est le rôle du navigateur en interne?
Je vais expliquer en bref.
Pour comprendre que vous devez connaître la file d’événements en javascript. Une file d'attente d'événements est implémentée dans le navigateur. Lorsqu'un événement est déclenché dans js, tous ces événements (comme un clic, etc.) sont ajoutés à cette file d'attente. Lorsque votre navigateur n'a rien à exécuter, il prend un événement dans la file d'attente et l'exécute un à un.
Désormais, lorsque vous appelez setTimeout ou setInterval, votre rappel est enregistré dans un temporisateur dans le navigateur. Il est ajouté à la file d'attente des événements après l'expiration du délai imparti et éventuellement, javascript extrait l'événement de la file d'attente et l'exécute.
Cela arrive, car les moteurs javascript sont à thread unique et qu’ils ne peuvent exécuter qu’une chose à la fois. Ils ne peuvent donc pas exécuter d’autres scripts javascript et garder trace de votre minuterie. C'est pourquoi ces minuteries sont enregistrées avec le navigateur (les navigateurs ne sont pas à thread unique) et peuvent garder une trace de la minuterie et ajouter un événement dans la file d'attente après son expiration.
il en va de même pour setInterval uniquement dans ce cas, l'événement est ajouté à la file d'attente encore et encore après l'intervalle spécifié, jusqu'à ce qu'il soit effacé ou que la page du navigateur soit actualisée.
Remarque
Le paramètre de délai que vous transmettez à ces fonctions est le délai minimum temps pour exécuter le rappel. En effet, après l’expiration du chronomètre le navigateur ajoute l'événement à la file d'attente à exécuter par le moteur javascript mais l'exécution du rappel dépend de votre événements position dans la file d'attente et comme le moteur est single threaded il exécutera tous les événements de la file d'attente un à un.
Par conséquent, votre rappel peut parfois prendre plus de temps que le délai spécifié pour être appelé spécialement lorsque votre autre code bloque le thread et ne lui laisse pas le temps de traiter ce qu'il y a dans la file d'attente.
Et comme je l'ai mentionné, javascript est un seul fil. Donc, si vous bloquez le fil trop longtemps.
Comme ce code
while(true) { //infinite loop
}
Votre utilisateur peut recevoir un message indiquant que page ne répond pas.
Vous trouverez ci-dessous un exemple de code qui utilise async/wait pour avoir un délai réel.
Il y a beaucoup de contraintes et cela peut ne pas être utile, mais poster ici pour le plaisir.
async function delay(delayInms) {
return new Promise(resolve => {
setTimeout(() => {
resolve(2);
}, delayInms);
});
}
async function sample() {
console.log('a');
console.log('waiting...')
let delayres = await delay(3000);
console.log('b');
}
sample();Voici ce que je fais pour résoudre ce problème. Je conviens que c'est à cause du problème de synchronisation et qu'il fallait une pause pour exécuter le code.
var delayInMilliseconds = 1000;
setTimeout(function() {
//add your code here to execute
}, delayInMilliseconds);
Ce nouveau code le mettra en pause pendant 1 seconde et pendant ce temps exécutera votre code.
Pour les appels de synchronisation, vous pouvez utiliser la méthode ci-dessous:
function sleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if ((new Date().getTime() - start) > milliseconds){
break;
}
}
}
Je vais donner mon avis car cela m'aide à comprendre ce que je fais.
pour faire un diaporama avec défilement automatique avec une attente de 3 secondes, j’ai fait ce qui suit:
var isPlaying = true;
function autoPlay(playing){
var delayTime = 3000;
var timeIncrement = 3000;
if(playing){
for(var i=0; i<6; i++){//I have 6 images
setTimeout(nextImage, delayTime);
delayTime += timeIncrement;
}
isPlaying = false;
}else{
alert("auto play off");
}
}
autoPlay(isPlaying);
Rappelez-vous cela lors de l'exécution de setTimeout () comme ceci; il exécutera toutes les fonctions de temporisation comme si elles étaient exécutées en même temps, en supposant que, dans setTimeout (nextImage, delayTime), le temps de retard est de 3 000 millisecondes statique.
Ce que j’ai fait pour expliquer cela a été d’ajouter 3 000 milli/s supplémentaires après chaque incrémentation de boucle via delayTime += timeIncrement;.
voici à quoi ressemble mon image suivante:
function nextImage(){
if(currentImg === 1){//change to img 2
for(var i=0; i<6; i++){
images[i].style.zIndex = "0";
}
images[1].style.zIndex = "1";
imgNumber.innerHTML = imageNumber_Text[1];
imgDescription.innerHTML = imgDescText[1];
currentImg = 2;
}
else if(currentImg === 2){//change to img 3
for(var i=0; i<6; i++){
images[i].style.zIndex = "0";
}
images[2].style.zIndex = "1";
imgNumber.innerHTML = imageNumber_Text[2];
imgDescription.innerHTML = imgDescText[2];
currentImg = 3;
}
else if(currentImg === 3){//change to img 4
for(var i=0; i<6; i++){
images[i].style.zIndex = "0";
}
images[3].style.zIndex = "1";
imgNumber.innerHTML = imageNumber_Text[3];
imgDescription.innerHTML = imgDescText[3];
currentImg = 4;
}
else if(currentImg === 4){//change to img 5
for(var i=0; i<6; i++){
images[i].style.zIndex = "0";
}
images[4].style.zIndex = "1";
imgNumber.innerHTML = imageNumber_Text[4];
imgDescription.innerHTML = imgDescText[4];
currentImg = 5;
}
else if(currentImg === 5){//change to img 6
for(var i=0; i<6; i++){
images[i].style.zIndex = "0";
}
images[5].style.zIndex = "1";
imgNumber.innerHTML = imageNumber_Text[5];
imgDescription.innerHTML = imgDescText[5];
currentImg = 6;
}
else if(currentImg === 6){//change to img 1
for(var i=0; i<6; i++){
images[i].style.zIndex = "0";
}
images[0].style.zIndex = "1";
imgNumber.innerHTML = imageNumber_Text[0];
imgDescription.innerHTML = imgDescText[0];
currentImg = 1;
}
}
Si vous avez besoin d'actualisation, voici une autre possibilité:
setTimeout(function () {
$("#jsSegurosProductos").jsGrid("refresh");
}, 1000);