让我用一个虚拟的情况来解释我的问题。让我们考虑以下代码:

var counter = 0;
function increase(){
    if(counter < 10){
        counter++;
        setTimeout(increase, 100);
    }
}


现在,想法是在increase()函数完成其工作之后显示计数器值。让我们尝试一下:

increase();
alert(counter);


您可能知道,它不起作用。 alert()调用显示1,而不是10。一旦函数完全完成其递增工作,我想显示counter的值。

有没有简单的方法可以解决我的问题?

[注意]
 不能使用回调函数,因为我不希望increase()知道我想在完成后做一些事情(出于模块化目的)。所以,我想避免这样的事情:

function increaseForTheKings(f){
    if(counter < 10){
        counter++;
        setTimeout(function(){ increase(f); }, 100);
    } else {
       f();
    }
}

最佳答案

执行此操作的标准方法是使用promises

var counter = 0;
function increase(){
  var d = jQuery.Deferred();
  var doIncrease = function() {
    if(counter < 10){
        counter++;
        setTimeout(doIncrease, 100);
    } else {
      d.resolve();
    }
  };
  doIncrease();
  return d.promise();
};

increase().then(function() {
  alert(counter);
});

09-25 17:19