Question

我遇到了Javascript异步调用问题。下面的Car类有一个 move 函数，它接受两个参数，第一个是一个值，第二个是回调函数，它将在1秒后调用，这个回调函数接受转发方法返回的值。

var Car = function() {
  this._count = 0;
};

Car.prototype = {
  move: function(value, onMoved) {
    setTimeout(function() {
      onMoved(this.forward(value));
    }.bind(this), 1000);
  },
  forward: function(value) {
    this._count = this._count + value;
    return this._count;
  }
};

我想像这样调用move函数：

var values = [1, 2, 3, 4];
var car = new Car();

values.forEach(function(value) {
  car.move(value, function(result) {
    console.log(result);
  });
});

现在我的问题是回调函数 onMoved 不会等待1秒钟在它输出的每个值之间执行。我怎样才能使它在输出的每个值之间等待？我被允许使用underscore.js。谢谢。

Answer 1

在javascript中的setTimeout将队列中的回调函数注册为当前执行堆栈空闲时将来执行。例如： -

while(1){
 setTimeout(function(){
   console.log('hello');
 },1000);
}

这不会打印hello，因为执行堆栈永远不会是空闲的。

回到示例，我们调用move方法，该方法将被推送到队列中。一秒钟之后，它开始逐个执行每个函数，没有任何延迟，因为setTimeout设置为固定时间即。 1000毫秒。

的解决方法： -

var Car = function() {
  this._count = 0;
};

Car.statCount = 0;

Car.prototype = {
 move: function(value, onMoved) {
  this.constructor.statCount++;
  setTimeout(function() {
    onMoved(this.forward(value));
  }.bind(this), 1000*Car.statCount);
 },
 forward: function(value) {
   this._count = this._count + value;
   return this._count;
 },
 constructor: Car
};


var values = [1, 2, 3, 4];
var car = new Car();

values.forEach(function(value) {
  car.move(value, function(result) {
    console.log(result);
  });
});

Answer 2

因为你需要1秒。在每次调用之间等待，您可以考虑在窗口上使用setInterval方法，而不是使用setTimeout方法：

您可以为每次迭代添加一些执行某些操作的方法，并在处理完所有值时完成迭代：

var i=0;
function go(result) { 
    if (!!values[i]) {
        car.move(values[i], function(result) {console.log(result);})
        i++;
    } else {
        window.clearInterval(interval);
    }
}

使用setInterval

调用此函数

var interval = window.setInterval(go, 1000);

看看以下小提琴：
https://jsfiddle.net/adw1k98m/1/

（请参阅控制台日志输出）

Javascript异步调用

2 个答案: