处理并等待之前的 JavaScript 调用完成

Question

我有一个绑定到谷歌地图上的鼠标点击事件的函数。由于该功能的性质，处理完成可能需要一些时间（0.1 秒 - 2 秒，具体取决于连接速度）。这本身并不是什么大问题，但是如果用户点击满意，这可能会导致问题，并且以后的调用有点依赖于前一个。

让后面的调用等待前面的调用完成的最佳方法是什么？甚至是处理先前调用失败的最佳方法？

我看过以下内容：

• 使用自定义.addEventListener (Link)
• 使用等待前一个已处理的 while 循环
• 使用简单的 if 语句检查是否需要重新运行前一个语句
• 使用其他形式的回调

现在是一些上下文示例代码：

this.createPath = function(){
    //if previous path segment has no length
    if (pathSegment[this.index-1].getPath().length === 0){ 
        //we need the previous path segment recreated using this same function
        pathSegment[this.index-1].createPath();
        //now we can retry this path segment again
        this.createPath();
    }
    //all is well, create this path segment using Google Maps direction service
    else {
        child.createPathLine(pathSegment[this.index-1].getEndPoint(), this.clickCoords);
    }
}

自然地，这段代码会疯狂循环并创建许多请求。

Answer 1

这是 promises 的一个很好的用例。

它们的工作方式是这样的（使用 jQuery 承诺的示例，但如果您不想使用 jQuery，还有其他用于承诺的 API）：

function doCallToGoogle() {
   var defer = $.Deferred();

   callToGoogleServicesThatTakesLong({callback: function(data) { 
        defer.resolve(data); 
   }});

   return defer.promise();
}

/* ... */
var responsePromise = doCallToGoogle();

/* later in your code, when you need to wait for the result */
responsePromise.done(function (data) {
     /* do something with the response */
});

好处是你可以链接承诺：

var newPathPromise = previousPathPromise.then(
       function (previousPath) { /* build new path */ });

看看：

• http://documentup.com/kriskowal/q/
• http://api.jquery.com/promise/

总而言之，promise 是对回调使用的对象抽象，这对于控制流非常有用（链接、等待所有回调、避免大量回调嵌套）。