我正在使用 google maps api，这段代码异步返回地点列表。我怎样才能调用这个函数并让它在收集完所有数据后触发一些东西？到目前为止，这是我尝试过的 -

$.search = function(boxes) {

    function findNextPlaces(place_results, searchIndex) {
        var dfd = $.Deferred();
        if (searchIndex < boxes.length) {
            service.radarSearch({
                bounds: boxes[searchIndex],
                types: ["food"]
            }, function (results, status) {
                if (status != google.maps.places.PlacesServiceStatus.OK) {
                    return dfd.reject("Request["+searchIndex+"] failed: "+status);
                }
                console.log( "bounds["+searchIndex+"] returns "+results.length+" results" );
                for (var i = 0, result; result = results[i]; i++) {
                    var marker = createMarker(result);
                    place_results.push(result.reference); // marker?
                }
            });
            return dfd.then(findNextPlaces);
        } else {
            return dfd.resolve(place_results).promise();
        }
    }

    return findNextPlaces([], 0);
};

最佳答案

要回答标题所暗示的问题，“将回调转化为 promise ”，简单的答案是使用一个非常简单的“ promise 模式”(我的术语)，其中 Deferred 的 .resolve() 方法被建立为回调:

带回调的原始调用:

obj.method(param1, param2, ... paramN, callbackFn);

转换后的调用，使用 Deferred 包装器:

$.Deferred(function(dfd) {
    obj.method(param1, param2, ... paramN, dfd.resolve);
}).promise();

无论 obj.method 是否异步，这都可以完成。优点是您现在可以在同一代码块中或更典型地在分配或返回生成的 Promise 的其他地方使用 Deferreds/promises 的完整链式。

在这个问题的情况下，可以使用这种模式......

$.search = function(boxes, types) {

    function findPlaces(box) {
        var request = {
           bounds: box,
           types: types
        };

        //***********************
        // Here's the promisifier
        //***********************
        return $.Deferred(function(dfd) {
            service.radarSearch(request, dfd.resolve);
        }).promise();
        //***********************
        //***********************
        //***********************
    }

    function handleResults(results, status, searchIndex) {
        var message, marker;
        if (status != google.maps.places.PlacesServiceStatus.OK) {
            message = "bounds[" + searchIndex + "] failed : " + status;
        }
        else {
            message = "bounds[" + searchIndex + "] returns " + results.length + " results";
            for (var i = 0, result; result = results[i]; i++) {
                marker = createMarker(result);
                place_Results.push(result.reference);
            }
        }
        return message;
    }

    var place_Results = [],
        p = $.when();//resolved starter promise

    //This concise master routine comprises a loop to build a `.then()` chain.
    $.each(boxes, function(i, box) {
        p = p.then(function() {
            return findPlaces(box).done(function(results, status) {
                // This function's arguments are the same as the original callback's arguments.
                var message = handleResults(results, status, i);
                $('#side_bar').append($("<div/>").append(message));
            });
        });
    });

    //Now, chain a final `.then()` in order to make the private var `place_Results` available via the returned promise. For good measure, the `types` array is also repeated back.
    return p.then(function() {
        return {
            types: types,
            results: place_Results
        };
    });
};

$.search() 现在可以按如下方式使用:

$.search(boxes, ["food"]).done(function(obj) {
    alert(obj.results.length + ' markers were a added for: "' + obj.types.join() + '"');
});

DEMO - 注意:由于 jQuery 1.8.3 对 jQuery.Deferred.then() 进行了重大修订，因此需要 jQuery 1.8.3+。

这并不完全等同于问题中的代码，但可能有助于诊断您报告的问题。特别是:

• 它不会因错误而停止
• 它将在“#side_bar”中放置成功和错误 消息。

调整代码来执行您想要的操作应该足够简单。

关于javascript - 将回调变成 promise ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21967065/