20

一時停止または遅延を作成する必要がある Web サイトで作業しています。ループインまたはループで
一時停止または遅延を作成する方法を教えてくださいforjavascriptjQuery

これはテスト例です

 var s = document.getElementById("div1");
 for (i = 0; i < 10; i++) {
     s.innerHTML = s.innerHTML + i.toString();
     //create a pause of 2 seconds.
  }
4

12 に答える 12

28

関数で遅延を使用することはできません。これは、要素に対して行った変更が、関数を終了するまで表示されないためです。

を使用しsetTimeoutて、後でコードを実行します。

var s = document.getElementById("div1");
for (i = 0; i < 10; i++) {

  // create a closure to preserve the value of "i"
  (function(i){

    window.setTimeout(function(){
      s.innerHTML = s.innerHTML + i.toString();
    }, i * 2000);

  }(i));

}
于 2012-04-07T22:08:29.810 に答える
8 
var wonderfulFunction = function(i) {
   var s = document.getElementById("div1"); //you could pass this element as a parameter as well
   i = i || 0;
   if(i < 10) {
      s.innerHTML = s.innerHTML + i.toString();

      i++;
      //create a pause of 2 seconds.
      setTimeout(function() { wonderfulFunction(i) }, 2000);          
   }
}

//first call
wonderfulFunction(); //or wonderfulFunction(0);

javascriptコードを一時停止することはできません。言語全体がイベントで機能するように作られています。私が提供したソリューションでは、関数を少し遅らせて実行できますが、実行は停止しません。

于 2012-04-07T22:09:26.930 に答える
2

私はすべてを試しましたが、このコードの方が優れていると思います。非常に単純なコードです。

var s = document.getElementById("div1");
var i = 0;
setInterval(function () {s.innerHTML = s.innerHTML + i.toString();  i++;}, 2000);
于 2012-04-07T23:10:09.397 に答える
2

FORループで一時停止または遅延を作成する場合、唯一の実際の方法は

while (true) {
    if( new Date()-startTime >= 2000) {
        break;
    }
}

startTime は while を実行する前の時間ですが、この方法ではブラウザが非常に遅くなります

于 2012-04-08T01:34:35.303 に答える
0

他のいくつかの答えはうまくいくでしょうが、私はコードがあまりエレガントではないと思います。Frame.jsライブラリは、この問題を正確に解決するように設計されています。フレームを使用すると、次のように実行できます。

var s = document.getElementById("div1");
for (i = 0; i < 10; i++) {
   Frame(2000, function(callback){ // each iteration would pause by 2 secs
      s.innerHTML = s.innerHTML + i.toString();
      callback();
   }); 
}
Frame.start();

この場合、setTimeoutを使用する例とほぼ同じですが、Frameには多くの利点があります。特に、複数またはネストされたタイムアウトを実行しようとしている場合、またはタイムアウトが機能する必要があるより大きなJSアプリケーションがある場合はそうです。 。

于 2012-04-07T22:41:46.047 に答える
0

ループ内でJavascript関数を直接一時停止してfor、後でその時点で再開することはできません。

于 2012-04-07T22:10:30.573 に答える
0

I am executing a function where I need access to the outside object properties. So, the closure in Guffa solution doesn't work for me. I found a variation of nicosantangelo solution by simply wrapping the setTimeout in an if statement so it doesn't run forever.

    var i = 0;
    function test(){

        rootObj.arrayOfObj[i].someFunction();
        i++;
        if( i < rootObj.arrayOfObj.length ){
            setTimeout(test, 50 ); //50ms delay
        }

    }
    test();
于 2015-12-01T13:25:05.130 に答える
0

私が見つけた方法は、代わりに単純setInterval()にループすることでした。これが私のコード例です:

var i = 0;
var inte = setInterval(() => {
    doSomething();

    if (i == 9) clearInterval(inte);
    i++;
}, 1000);

function doSomething() {
    console.log(i);
};

これは 0 から 9 までループし、各反復の間に 1 秒待機します。

出力:

0 1 2 3 4 5 6 7 8 9
于 2019-04-20T18:17:40.403 に答える
0

これはあなたがそれを行うべき方法です

var i = 0;
setTimeout(function() {
   s.innerHTML = s.innerHTML + i.toString();
   i++;
},2000);
于 2012-04-07T22:25:08.190 に答える
0

次のコードは、JS で実行できる疑似マルチスレッドの例です。これは、ループの各反復をどのように遅らせることができるかの大まかな例です。

var counter = 0;

// A single iteration of your loop
// log the current value of counter as an example
// then wait before doing the next iteration
function printCounter() {
    console.log(counter);
    counter++;
    if (counter < 10)
        setTimeout(printCounter, 1000);
}

// Start the loop    
printCounter();
于 2012-04-07T22:28:38.943 に答える