2

JS/JQuery を使用してプログレス バーをシミュレートしたいのですが、これは私の HTML コードです。

<p id="percentage">0%</p>

0 から 100 まで行って、その進行をスローモーションで視覚的に確認したいので、まさに必要なのは For ループと一時停止機能ですが、残念ながらスリープのような機能はありません。Javascript

最初の試行:

いくつかの調査を行った後、私は でsetTimeOut関数を見つけました。JqueryここにJavascriptコードがあります:

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

ドキュメントによると、setTimeout関数は非同期であり、の実行はJavascript続行されるためです。つまり、一時停止のような動作はなく、プログレス バーは 0 から 1 ではなく、1000 ミリ秒後に 0 から 100 になります。

2回目の試行:

setTimeout は私の問題を解決できませんが、独自の sleep() 関数を実装しようとしましたが、ここにあります:

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

これがこのシナリオの特効薬だと思っていたのですが、これは悪い考えでした。私は知っていますが、このアプローチでも問題が解決せず、スリープ時間中はインターフェースがアイドル状態のままだったので驚きました (私はHTML ページでクリック、選択、または何もできない)。

この問題を解決するにはどうすればよいですか?

4

2 に答える 2