Question

setTimeout(thisFunc, 500);
setTimeout(thatFunc, 500);
setTimeout(otherFunc, 500);
finalFunc();

我期望的是thisFunc（），然后是半秒暂停，然后是thatFunc（），然后是半秒暂停，然后是otherFunc（），然后是暂停。然后是finalFunc（）。

实际发生的是，页面暂停1 1/2秒，然后所有四个函数似乎立即执行。

我怎样才能实现我的暂停？它完全是为了UI中的美学目的而完成的。

Answer 1

如果您需要使用500 ms作为变量，也可以使用回调：

var timeout = 500;

setTimeout(function() {
  thisFunc();
  setTimeout(function() {
    thatFunc();
    setTimeout(function() {
      otherFunc();
    }, timeout);
  }, timeout);
}, timeout);

Answer 2

另一种方式是：

setTimeout(thisFunc, 500);

function thisFunc () {
    /* ...whatever... */
    setTimeout(thatFunc, 500);
}

function thatFunc () {
    /* ...whatever... */
    setTimeout(otherFunc, 500);
}

function otherFunc () {
    /* ...whatever... */
    setTimeout(finalFunc, 500);
}

function finalFunc () {
    /* ...whatever... */
}

Answer 3

尝试正确地提供delay，

setTimeout(thisFunc, 500);
setTimeout(thatFunc, 1000);
setTimeout(otherFunc, 1500);
setTimeout(finalFunc, 2000);

如果你为所有500提供setTimeout ms，那么每件事都会同时被解雇。

最好的方法是，

var func = function(func){ func(); }

function setContinuos() {
  var funcs = Array.from(arguments);
  var delay = funcs.pop();
  funcs.forEach(function(itm, index) {
    setTimeout(function() {
      func(itm);
    }, (index + 1) * delay)
  });
}

setContinuos(func1,func2,func3,func4,500);

连续的setTimout（）一次调用所有执行

3 个答案:

DEMO