Question

我有一个带有自己的setTimeOut值的多个回调函数。当我尝试依次运行时，具有最短setTimeOut值的那个首先被渲染，即使它被称为最新的。

有类似的问题（例如this，this和this），但是当每个函数都有自己的内部setTimeout值时，它们的答案不起作用。

最好的方法（使用纯JS）强制函数等待（或确保前一个函数完成运行）直到上一个函数完成，而不使用额外的setTimeOut？

代码：

function NumSequences(){};

NumSequences.prototype.one = function one(callback) {
 setTimeout(function() {
   callback()
   console.log('one');
 }, 1000);
};

NumSequences.prototype.two = function two(callback) {
 setTimeout(function() {
   callback()
   console.log('two');
 }, 500);
};

NumSequences.prototype.three = function three(callback) {
 setTimeout(function() {
   callback()
   console.log('three');
 }, 200);
};
var numSequences = new NumSequences();

function countNow(){};

var promise = new Promise(function(resolve) {
   resolve(numSequences.one(countNow));
});

promise.then(function() {
  return numSequences.two(countNow);
}).then(function() {
  return numSequences.three(countNow); 
});

结果：

three //coming first because the function three has the shortest setTimeout value
two 
one //coming at last despite being called first

结果应该是：

one
two 
three

链接到JSBin

Answer 1

为过程的每个部分定义函数，使用复制的数组数组作为函数调用的参数，移动数组直到数组中没有元素

function NumSequences(message, time) {
  return new Promise(function(resolve) {
    setTimeout(function() {
      resolve(message)
    }, time)
  })
}

function count(value) {
  console.log(value);
}

function next(array) {
  if (array.length) {
    return process(array)
  } else {
    return "done"
  }
}

let arr = [
  ["one", 1000],
  ["two", 500],
  ["three", 200]
];

let copy = arr.slice(0);

function process(array) {
  return NumSequences.apply(null, array.shift())
    .then(count)
    .then(next.bind(null, array))
}

process(copy)
.then(function(complete) {
  console.log(complete)
})

如何在使用自己的setTimeOut执行下一个回调函数之前确保JS函数已完成运行？

1 个答案: