Question

我正在一个网站上工作，我需要创建暂停或延迟所以请告诉我如何在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.
  }

Answer 1

您不能在函数中使用延迟，因为在退出函数之前，您对元素所做的更改不会显示。

使用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));

}

Answer 2

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代码，整个语言都可以使用事件，我提供的解决方案让你执行函数有一些延迟，但执行永远不会停止。

Answer 3

如果你想在FOR循环中创建暂停或延迟，唯一真正的方法是

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

startTime是运行while之前的时间但是这种方法会导致浏览器变得很慢

Answer 4

我尝试了所有这些，但我认为这个代码更好，代码非常简单。

var s = document.getElementById("div1");
var i = 0;
setInterval(function () {s.innerHTML = s.innerHTML + i.toString();  i++;}, 2000);

Answer 5

在for循环中直接暂停Javascript函数然后稍后恢复是不可能的。

Answer 6

以下代码是您可以在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();

Answer 7

虽然其他几个答案都可行，但我发现代码不那么优雅。 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应用程序在...内工作。

Answer 8

我正在执行一个需要访问外部对象属性的函数。因此，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();

Answer 9

我发现的方法是简单地使用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

Answer 10

不可能暂停。但是，您可以使用setTimeout（）函数延迟执行代码片段。无论如何，暂停整个执行没有任何意义。

Answer 11

这就是你应该这样做的方式

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

如何在FOR循环中创建暂停或延迟？

11 个答案: