Fonction de veille synchrone en Javascript

Je veux simuler une barre de progression en utilisant JS / JQuery, voici mon code HTML:

0%

Je veux aller de 0 à 100 et voir -Visually- les progrès au ralenti, donc il me faut exactement une boucle For et une fonction de pause, mais malheureusement, il n’y a pas de fonction de veille en Javascript

1er essai:

Après quelques recherches, j’ai trouvé la fonction setTimeOut dans Jquery . Vous trouverez ci- Javascript code Javascript :

 for (i = 0; i < 100; i++) { setTimeout(function() { $("#percentage").text(i+"%"); }, 1000); }

Mais peu probable, cela ne fonctionnera pas, car selon la documentation, la fonction setTimeout est asynchrone et l’exécution du Javascript se poursuivra. Cela signifie qu’il n’y a pas de comportement semblable à une pause et que la barre de progression va de 0 à 100 après 1000 ms au lieu de 0 à 1.

2ème essai:

Bien que setTimeout ne puisse pas résoudre mon problème, j’ai essayé d’implémenter ma propre fonction sleep (), et la voici:

 function sleep(ms){ var waitTimeInMilliseconds = new Date().getTime() + ms; while(new Date().getTime() < waitTimeInMilliseconds ) true; }

Alors que je pensais que c’était la solution miracle à ce scénario – C’était une mauvaise idée, je sais -, j’ai été surpris, car cette approche ne résolvait pas non plus mon problème, et l’interface restait inactive pendant le temps de sumil ( ne peux pas cliquer, sélectionner ou faire quoi que ce soit dans ma page HTML).

Comment puis-je résoudre ce problème ?

Vous voudrez probablement quelque chose comme ceci avec setInterval :

 var i = 0; var intervalId; intervalId = setInterval(function() { $("#pourcentage").text(i+"%"); if(i >= 100){ clearInterval(intervalId); } i++; }, 1000);

ou utilisez setTimeout à la place:

 var i = 0; var scheduleNextTimeout; scheduleNextTimeout = function(){ setTimeout(function() { $("#pourcentage").text(i+"%"); if(i < 100){ scheduleNextTimeout(); } i++; }, 1000); }; scheduleNextTimeout();

Je suggérerais l’utilisation d’une fonction récursive pour cela.

 function doProgress (startingPercent, interval) { var percent = startingPercent++; window.setTimeout(function () { $('#percentage').text(percent.toSsortingng() + '%'); if (percent < 100) { doProgress(percent, interval); } }, interval); }