20

我正在一个网站上工作，我需要在其中创建暂停或延迟。
所以请告诉我如何在for循环中创建暂停或延迟javascript或jQuery

这是一个测试示例

 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

不可能在for循环中直接暂停 Javascript 函数，然后在该点恢复。

于 2012-04-07T22:10:30.573 回答
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 回答
0

虽然其他几个答案会起作用，但我发现代码不太优雅。Frame.js库正是为了解决这个问题而设计的。使用 Frame 你可以这样做：

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

我正在执行一个需要访问外部对象属性的函数。所以，Guffa解决方案中的关闭对我不起作用。通过简单地将 setTimeout 包装在 if 语句中，我发现了一种nicosantangelo解决方案的变体，因此它不会永远运行。

    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

无法暂停循环。但是，您可以使用 setTimeout() 函数延迟代码片段的执行。无论如何暂停整个执行是没有多大意义的。

于 2020-04-24T11:02:50.620 回答
-1

我使用 do...while 循环在我的代码中延迟关闭太快的模态对话框。

your stuff....

var tNow = Date.now();
var dateDiff = 0;
do {
    dateDiff = Date.now() - tNow;
} while (dateDiff < 1000); //milliseconds - 2000 = 2 seconds

your stuff....
于 2017-05-08T12:49:08.923 回答