Question

我想根据条件在循环中创建延迟。说，我有这个：

var maxLoops = 50;
var counter = 0;

(function next() {
    if (counter++ >= maxLoops) {
      return;
    }

    setTimeout(function() {
        console.log(counter);
        next();
    }, 100);
})();

只有当计数器等于10,20或30时，有没有办法暂停这个过程2秒？所以应该打印：

 1....10 
 (delay for a custom period of time)
 11....20
 (delay for a custom period of time)
 21....30
 (delay for a custom period of time)
 31...50

最重要的是，当计数器不等于10,20,30时，我根本不想延迟。

Answer 1

当你有10的倍数时，确实可以这样做。只需更改超时。

var maxLoops = 50;
var counter = 0;

(function next() {
    counter += 1
    var timeout_duration = counter % 10 == 0 ? 2000 : 0;

    if (counter >= maxLoops) {
      return;
    }

    setTimeout(function() {
        console.log(counter);
        next();
    }, timeout_duration);
})();

也就是说，需要一些改进，因为maxLoops和counter是在全局范围内定义的。使其成为一种功能。

function loop (maxLoops, start) {
    var counter = start || 0;

    (function next() {
        counter += 1
        var timeout_duration = counter % 10 == 0 ? 2000 : 100;

        if (counter >= maxLoops) {
          return;
        }

        setTimeout(function() {
            console.log(counter);
            next();
        }, timeout_duration);
    })();
}

loop(50);

如果您不想在计数器不是10的倍数时拨打next，那么您可以在通话之间添加一个通常的循环。

function loop (maxLoops, start) {
    var counter = start || 0;
    var timeout_duration = 2000;

    (function next() {
        while(counter < maxLoops && counter % 10 != 0) {
          counter += 1
        }

        if (counter >= maxLoops) {
          return;
        }

        setTimeout(function() {
            console.log(counter);
            next();
        }, timeout_duration);
    })();
}

loop(50);

尽管如此，请记住，setTimeout 2000并不意味着恰好是2秒，但不会少于2秒。如果有的话，有一个断开线程的循环，setTimeout可能永远不会被调用，因为Javascript是单线程的，并且事实上在2秒后不会调用该函数。如果您计划在时间内使用setTimeout来衡量某些内容，则可能需要计划一些其他内容，其中包含Date对象的时间安排。

Answer 2

您可以根据您的计数器使用不同时间的setTimeout()：

var maxLoops = 50;
var counter = 0;

(function next() {
    if (counter++ >= maxLoops) {
      return;
    }
    var delay = 0;
    // on multiples of 10, use a longer counter
    if (counter % 10 === 0) {
        delay = 2000;
    }
    setTimeout(function() {
        console.log(counter);
        next();
    }, delay);
})();

或者，当您不需要延迟时，可以完全跳过setTimeout()。

var maxLoops = 50;
var counter = 0;

(function next() {
    if (counter++ >= maxLoops) {
      return;
    }
    // on multiples of 10, use a longer counter
    if (counter % 10 === 0) {
        setTimeout(function() {
            console.log(counter);
            next();
        }, 2000);
    } else {
        console.log(counter);
        next();
    }
})();

或者，而不是递归，你可以像在这个工作片段中一样使用while循环：

＆＃13;

var maxLoops = 50;
var counter = 0;

(function next() {
    // while we haven't hit maxLoops and while not a multiple of 10
    while (counter < maxLoops && counter % 10 !== 0 && counter !== 0) {
        log(counter);
        ++counter;
    }
    if (counter < maxLoops) {
        setTimeout(function() {
            log(counter);
            ++counter;
            next();
        }, 1000);
    }
})();

function log(x) {
    var div = document.createElement("span");
    div.innerHTML = x + " ";
    document.body.appendChild(div);
}

＆＃13;

如何根据条件延迟循环？

2 个答案: