Làm cách nào để thêm độ trễ trong vòng lặp JavaScript?

Tôi muốn thêm một độ trễ / ngủ trong whilevòng lặp:

Tôi đã thử nó như thế này:

alert('hi');

for(var start = 1; start < 10; start++) {
  setTimeout(function () {
    alert('hello');
  }, 3000);
}

Chỉ có kịch bản đầu tiên là đúng: sau khi hiển thị alert('hi'), nó sẽ đợi trong 3 giây sau đó alert('hello')sẽ được hiển thị nhưng sau đó alert('hello')sẽ được lặp lại liên tục.

Điều tôi muốn là sau khi alert('hello')được hiển thị 3 giây sau alert('hi')đó, nó cần đợi 3 giây cho lần thứ hai alert('hello')và cứ thế.

Các setTimeout()chức năng là không chặn và sẽ trở lại ngay lập tức. Do đó, vòng lặp của bạn sẽ lặp lại rất nhanh và nó sẽ bắt đầu thời gian chờ 3 giây lần lượt kích hoạt lần lượt. Đó là lý do tại sao các cảnh báo đầu tiên của bạn bật lên sau 3 giây và tất cả phần còn lại theo sau liên tiếp mà không có bất kỳ sự chậm trễ nào.

Bạn có thể muốn sử dụng một cái gì đó như thế này thay thế:

var i = 1;                  //  set your counter to 1

function myLoop() {         //  create a loop function
  setTimeout(function() {   //  call a 3s setTimeout when the loop is called
    console.log('hello');   //  your code here
    i++;                    //  increment the counter
    if (i < 10) {           //  if the counter < 10, call the loop function
      myLoop();             //  ..  again which will trigger another 
    }                       //  ..  setTimeout()
  }, 3000)
}

myLoop();                   //  start the loop

Bạn cũng có thể làm gọn nó, bằng cách sử dụng hàm tự gọi, chuyển số lần lặp làm đối số:

(function myLoop(i) {
  setTimeout(function() {
    console.log('hello'); //  your code here                
    if (--i) myLoop(i);   //  decrement i and call myLoop again if i > 0
  }, 3000)
})(10);                   //  pass the number of iterations as an argument

Hãy thử một cái gì đó như thế này:

var i = 0, howManyTimes = 10;
function f() {
    alert( "hi" );
    i++;
    if( i < howManyTimes ){
        setTimeout( f, 3000 );
    }
}
f();

Nếu sử dụng ES6, bạn có thể sử dụng letđể đạt được điều này:

for (let i=1; i<10; i++) {
    setTimeout( function timer(){
        alert("hello world");
    }, i*3000 );
}

Những gì letkhông được khai báo icho mỗi lần lặp , không phải vòng lặp. Bằng cách này, những gì được thông qua setTimeoutlà chính xác những gì chúng ta muốn.

Vì ES7 có cách tốt hơn để chờ đợi một vòng lặp:

// Returns a Promise that resolves after "ms" Milliseconds
function timer(ms) {
 return new Promise(res => setTimeout(res, ms));
}

async function load () { // We need to wrap the loop into an async function for this to work
  for (var i = 0; i < 3; i++) {
    console.log(i);
    await timer(3000); // then the created Promise can be awaited
  }
}

load();

Khi động cơ đạt đến bộ awaitphận, nó đặt thời gian chờ và tạm dừng việc thực hiệnasync function . Sau đó khi hết thời gian, thực hiện tiếp tục tại thời điểm đó. Điều đó khá hữu ích khi bạn có thể trì hoãn (1) các vòng lặp lồng nhau, (2) có điều kiện, (3) các hàm lồng nhau:

async function task(i) { // 3
  await timer(1000);
  console.log(`Task ${i} done!`);
}

async function main() {
  for(let i = 0; i < 100; i+= 10) {
    for(let j = 0; j < 10; j++) { // 1
      if(j % 2) { // 2
        await task(i + j);
      }
    }
  }
}
    
main();

function timer(ms) { return new Promise(res => setTimeout(res, ms)); }

Tham khảo về MDN

Mặc dù ES7 hiện được hỗ trợ bởi NodeJS và các trình duyệt hiện đại, bạn có thể muốn phiên dịch nó với BabelJS để nó chạy ở mọi nơi.

Một cách khác là nhân lên thời gian chờ, nhưng lưu ý rằng đây không giống như giấc ngủ . Mã sau vòng lặp sẽ được thực thi ngay lập tức, chỉ thực hiện chức năng gọi lại được hoãn lại.

for (var start = 1; start < 10; start++)
    setTimeout(function () { alert('hello');  }, 3000 * start);

Thời gian chờ đầu tiên sẽ được đặt thành 3000 * 1, lần thứ hai 3000 * 2và cứ thế.

Điều này sẽ làm việc

for (var i = 0; i < 10; i++) {
  (function(i) {
    setTimeout(function() { console.log(i); }, 100 * i);
  })(i);
}

Hãy thử câu đố này: https://jsfiddle.net/wgdx8zqq/

Tôi nghĩ bạn cần một cái gì đó như thế này:

var TimedQueue = function(defaultDelay){
    this.queue = [];
    this.index = 0;
    this.defaultDelay = defaultDelay || 3000;
};

TimedQueue.prototype = {
    add: function(fn, delay){
        this.queue.push({
            fn: fn,
            delay: delay
        });
    },
    run: function(index){
        (index || index === 0) && (this.index = index);
        this.next();
    },
    next: function(){
        var self = this
        , i = this.index++
        , at = this.queue[i]
        , next = this.queue[this.index]
        if(!at) return;
        at.fn();
        next && setTimeout(function(){
            self.next();
        }, next.delay||this.defaultDelay);
    },
    reset: function(){
        this.index = 0;
    }
}

Mã kiểm tra:

var now = +new Date();

var x = new TimedQueue(2000);

x.add(function(){
    console.log('hey');
    console.log(+new Date() - now);
});
x.add(function(){
    console.log('ho');
    console.log(+new Date() - now);
}, 3000);
x.add(function(){
    console.log('bye');
    console.log(+new Date() - now);
});

x.run();

Lưu ý: sử dụng cảnh báo ngăn chặn thực thi javascript cho đến khi bạn đóng cảnh báo. Nó có thể là nhiều mã hơn bạn yêu cầu, nhưng đây là một giải pháp tái sử dụng mạnh mẽ.

Tôi có thể sẽ sử dụng setInteval. Như thế này,

var period = 1000; // ms
var endTime = 10000;  // ms
var counter = 0;
var sleepyAlert = setInterval(function(){
    alert('Hello');
    if(counter === endTime){
       clearInterval(sleepyAlert);
    }
    counter += period;
}, period);

Trong ES6 (ECMAScript 2015), bạn có thể lặp lại với độ trễ với trình tạo và khoảng thời gian.

Máy phát điện, một tính năng mới của ECMAScript 6, là các chức năng có thể được tạm dừng và tiếp tục. Gọi genFunc không thực thi nó. Thay vào đó, nó trả về một đối tượng được gọi là trình tạo cho phép chúng ta điều khiển thực thi genFunc. genFunc () ban đầu bị đình chỉ ở phần đầu của cơ thể. Phương thức genObj.next () tiếp tục thực hiện genFunc, cho đến lần mang lại tiếp theo. (Khám phá ES6)

Mã ví dụ:

let arr = [1, 2, 3, 'b'];
let genObj = genFunc();

let val = genObj.next();
console.log(val.value);

let interval = setInterval(() => {
  val = genObj.next();
  
  if (val.done) {
    clearInterval(interval);
  } else {
    console.log(val.value);
  }
}, 1000);

function* genFunc() {
  for(let item of arr) {
    yield item;
  }
}

Vì vậy, nếu bạn đang sử dụng ES6, đó là cách thanh lịch nhất để đạt được vòng lặp với độ trễ (theo ý kiến ​​của tôi).

Bạn có thể sử dụng toán tử khoảng RxJS . Khoảng thời gian phát ra số nguyên mỗi x số giây và mất là chỉ định số lần nó phải phát ra số

Rx.Observable
  .interval(1000)
  .take(10)
  .subscribe((x) => console.log(x))

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.1.0/rx.lite.min.js"></script>

Chỉ cần nghĩ rằng tôi sẽ đăng hai xu của tôi ở đây là tốt. Hàm này chạy một vòng lặp có độ trễ. Xem jsfiddle này . Chức năng như sau:

function timeout(range, time, callback){
    var i = range[0];                
    callback(i);
    Loop();
    function Loop(){
        setTimeout(function(){
            i++;
            if (i<range[1]){
                callback(i);
                Loop();
            }
        }, time*1000)
    } 
}

Ví dụ:

//This function prints the loop number every second
timeout([0, 5], 1, function(i){
    console.log(i);
});

Sẽ tương đương với:

//This function prints the loop number instantly
for (var i = 0; i<5; i++){
    console.log(i);
}

Tôi làm điều này với Bluebird Promise.delayvà đệ quy.

function myLoop(i) {
  return Promise.delay(1000)
    .then(function() {
      if (i > 0) {
        alert('hello');
        return myLoop(i -= 1);
      }
    });
}

myLoop(3);

<script src="//cdnjs.cloudflare.com/ajax/libs/bluebird/2.9.4/bluebird.min.js"></script>

Trong ES6 bạn có thể làm như sau:

 for (let i = 0; i <= 10; i++){       
     setTimeout(function () {   
        console.log(i);
     }, i*3000)
 }

Trong ES5 bạn có thể làm như sau:

for (var i = 0; i <= 10; i++){
   (function(i) {          
     setTimeout(function () {   
        console.log(i);
     }, i*3000)
   })(i);  
 }

Lý do là, letcho phép bạn khai báo các biến được giới hạn trong phạm vi của câu lệnh khối hoặc biểu thức được sử dụng, không giống như vartừ khóa, định nghĩa một biến toàn cục hoặc cục bộ cho toàn bộ hàm bất kể phạm vi khối.

    var startIndex = 0;
    var data = [1, 2, 3];
    var timeout = 1000;

    function functionToRun(i, length) {
      alert(data[i]);
    }

    (function forWithDelay(i, length, fn, delay) {
      setTimeout(function() {
        fn(i, length);
        i++;
        if (i < length) {
          forWithDelay(i, length, fn, delay);
        }
      }, delay);
    })(startIndex, data.length, functionToRun, timeout);

Một phiên bản sửa đổi của câu trả lời của Daniel Vassallo, với các biến được trích xuất thành các tham số để làm cho chức năng có thể tái sử dụng nhiều hơn:

Trước tiên hãy xác định một số biến cần thiết:

var startIndex = 0;
var data = [1, 2, 3];
var timeout = 3000;

Tiếp theo bạn nên xác định chức năng bạn muốn chạy. Điều này sẽ được thông qua i, chỉ số hiện tại của vòng lặp và độ dài của vòng lặp, trong trường hợp bạn cần nó:

function functionToRun(i, length) {
    alert(data[i]);
}

Phiên bản tự thực hiện

(function forWithDelay(i, length, fn, delay) {
   setTimeout(function () {
      fn(i, length);
      i++;
      if (i < length) {
         forWithDelay(i, length, fn, delay); 
      }
  }, delay);
})(startIndex, data.length, functionToRun, timeout);

Phiên bản chức năng

function forWithDelay(i, length, fn, delay) {
   setTimeout(function () {
      fn(i, length);
      i++;
      if (i < length) {
         forWithDelay(i, length, fn, delay); 
      }
  }, delay);
}

forWithDelay(startIndex, data.length, functionToRun, timeout); // Lets run it

   let counter =1;
   for(let item in items) {
        counter++;
        setTimeout(()=>{
          //your code
        },counter*5000); //5Sec delay between each iteration
    }

Bạn làm nó:

console.log('hi')
let start = 1
setTimeout(function(){
  let interval = setInterval(function(){
    if(start == 10) clearInterval(interval)
    start++
    console.log('hello')
  }, 3000)
}, 3000)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

/* 
  Use Recursive  and setTimeout 
  call below function will run loop loopFunctionNeedCheck until 
  conditionCheckAfterRunFn = true, if conditionCheckAfterRunFn == false : delay 
  reRunAfterMs miliseconds and continue loop
  tested code, thanks
*/

function functionRepeatUntilConditionTrue(reRunAfterMs, conditionCheckAfterRunFn,
 loopFunctionNeedCheck) {
    loopFunctionNeedCheck();
    var result = conditionCheckAfterRunFn();
    //check after run
    if (!result) {
        setTimeout(function () {
            functionRepeatUntilConditionTrue(reRunAfterMs, conditionCheckAfterRunFn, loopFunctionNeedCheck)
        }, reRunAfterMs);
    }
    else  console.log("completed, thanks");    
            //if you need call a function after completed add code call callback in here
}

//passing-parameters-to-a-callback-function
// From Prototype.js 
if (!Function.prototype.bind) { // check if native implementation available
    Function.prototype.bind = function () {
        var fn = this, args = Array.prototype.slice.call(arguments),
            object = args.shift();
        return function () {
            return fn.apply(object,
              args.concat(Array.prototype.slice.call(arguments)));
        };
    };
}

//test code: 
var result = 0; 
console.log("---> init result is " + result);
var functionNeedRun = function (step) {           
   result+=step;    
       console.log("current result is " + result);  
}
var checkResultFunction = function () {
    return result==100;
}  

//call this function will run loop functionNeedRun and delay 500 miliseconds until result=100    
functionRepeatUntilConditionTrue(500, checkResultFunction , functionNeedRun.bind(null, 5));

//result log from console:
/*
---> init result is 0
current result is 5
undefined
current result is 10
current result is 15
current result is 20
current result is 25
current result is 30
current result is 35
current result is 40
current result is 45
current result is 50
current result is 55
current result is 60
current result is 65
current result is 70
current result is 75
current result is 80
current result is 85
current result is 90
current result is 95
current result is 100
completed, thanks
*/

Đây là cách tôi tạo một vòng lặp vô hạn với độ trễ phá vỡ theo một điều kiện nhất định:

  // Now continuously check the app status until it's completed, 
  // failed or times out. The isFinished() will throw exception if
  // there is a failure.
  while (true) {
    let status = await this.api.getStatus(appId);
    if (isFinished(status)) {
      break;
    } else {
      // Delay before running the next loop iteration:
      await new Promise(resolve => setTimeout(resolve, 3000));
    }
  }

Chìa khóa ở đây là tạo ra một Promise mới giải quyết theo thời gian chờ và chờ đợi giải pháp.

Rõ ràng bạn cần async / chờ đợi hỗ trợ cho điều đó. Hoạt động trong Nút 8.

để sử dụng chung "quên các vòng lặp bình thường" và sử dụng kết hợp "setInterval" này bao gồm "setTimeOut" s: như thế này (từ các tác vụ thực tế của tôi).

        function iAsk(lvl){
            var i=0;
            var intr =setInterval(function(){ // start the loop 
                i++; // increment it
                if(i>lvl){ // check if the end round reached.
                    clearInterval(intr);
                    return;
                }
                setTimeout(function(){
                    $(".imag").prop("src",pPng); // do first bla bla bla after 50 millisecond
                },50);
                setTimeout(function(){
                     // do another bla bla bla after 100 millisecond.
                    seq[i-1]=(Math.ceil(Math.random()*4)).toString();
                    $("#hh").after('<br>'+i + ' : rand= '+(Math.ceil(Math.random()*4)).toString()+' > '+seq[i-1]);
                    $("#d"+seq[i-1]).prop("src",pGif);
                    var d =document.getElementById('aud');
                    d.play();                   
                },100);
                setTimeout(function(){
                    // keep adding bla bla bla till you done :)
                    $("#d"+seq[i-1]).prop("src",pPng);
                },900);
            },1000); // loop waiting time must be >= 900 (biggest timeOut for inside actions)
        }

PS: Hiểu rằng hành vi thực sự của (setTimeOut): tất cả chúng sẽ bắt đầu cùng một lúc "ba bla bla bla sẽ bắt đầu đếm ngược trong cùng một thời điểm" vì vậy hãy tạo thời gian chờ khác để sắp xếp thực hiện.

PS 2: ví dụ cho vòng lặp thời gian, nhưng đối với vòng lặp phản ứng, bạn có thể sử dụng các sự kiện, hứa hẹn async đang chờ ..

Theo hiểu biết của tôi, setTimeoutchức năng được gọi là không đồng bộ. Những gì bạn có thể làm là bọc toàn bộ vòng lặp trong một hàm async và chờ đợi một chuỗi Promisechứa setTimeout như được hiển thị:

var looper = async function () {
  for (var start = 1; start < 10; start++) {
    await new Promise(function (resolve, reject) {
      setTimeout(function () {
        console.log("iteration: " + start.toString());
        resolve(true);
      }, 1000);
    });
  }
  return true;
}

Và sau đó bạn gọi chạy nó như vậy:

looper().then(function(){
  console.log("DONE!")
});

Vui lòng dành chút thời gian để hiểu rõ về lập trình không đồng bộ.

Cứ thử đi

 var arr = ['A','B','C'];
 (function customLoop (arr, i) {
    setTimeout(function () {
    // Do here what you want to do.......
    console.log(arr[i]);
    if (--i) {                
      customLoop(arr, i); 
    }
  }, 2000);
})(arr, arr.length);

Kết quả

A // after 2s
B // after 2s
C // after 2s

Đây là một hàm mà tôi sử dụng để lặp qua một mảng:

function loopOnArrayWithDelay(theArray, delayAmount, i, theFunction, onComplete){

    if (i < theArray.length && typeof delayAmount == 'number'){

        console.log("i "+i);

        theFunction(theArray[i], i);

        setTimeout(function(){

            loopOnArrayWithDelay(theArray, delayAmount, (i+1), theFunction, onComplete)}, delayAmount);
    }else{

        onComplete(i);
    }
}

Bạn sử dụng nó như thế này:

loopOnArrayWithDelay(YourArray, 1000, 0, function(e, i){
    //Do something with item
}, function(i){
    //Do something once loop has completed
}

Kịch bản này hoạt động cho hầu hết mọi thứ

function timer(start) {
    setTimeout(function () { //The timer
        alert('hello');
    }, start*3000); //needs the "start*" or else all the timers will run at 3000ms
}

for(var start = 1; start < 10; start++) {
    timer(start);
}

Thử cái này...

var icount=0;
for (let i in items) {
   icount=icount+1000;
   new beginCount(items[i],icount);
}

function beginCount(item,icount){
  setTimeout(function () {

   new actualFunction(item,icount);

 }, icount);
}

function actualFunction(item,icount){
  //...runs ever 1 second
 console.log(icount);
}

Thực hiện đơn giản hiển thị một đoạn văn bản cứ sau hai giây khi vòng lặp đang chạy.

for (var i = 0; i < foo.length; i++) {
   setInterval(function(){ 
     console.log("I will appear every 2 seconds"); 
   }, 2000);
  break;
};

Thử cái này

//the code will execute in 1 3 5 7 9 seconds later
function exec(){
  for(var i=0;i<5;i++){
   setTimeout(function(){
     console.log(new Date());   //It's you code
   },(i+i+1)*1000);
  }
}