javascript - 为什么我的 deferred.done() 等待 AJAX 调用未解决？

Question

我有这段代码:

Event = new Event();

// Create a deferred object
var dfd = $.Deferred();

// Add handlers to be called when dfd is resolved
dfd.done( Event.getEvents( position.coords.latitude, position.coords.longitude ) ).then( function( data ){
    //rest of the code ..
    console.log("No!");
});

这不符合我想要的方式。完成的事情永远不会被解决，then()也永远不会被触发。这是 Event.getEvents (位于另一个文件中):

function Event() {

    this.getEvents = function( lat, lng )
    {
        var d = new $.Deferred();

        console.log("events");
        var key = getCookie("key");

        $.ajax({
            type:"GET",
            url: server_url + 'event/eventssurrounding',
            headers: { 'X-API-KEY': key },
            data: { lat:lat, lng: lng, radius: radius, limit: limit, offset: offset },
            dataType: 'json',
            success : function(results) {
                console.log('success');
                d.resolve = results.map( function ( event ) {

                    console.log(event);
                    var dist = JSON.stringify(event.distance);

                    console.log(dist);

                    return {
                        id: event.id,
                        name: event.name,
                        type: event.type,
                        desc: event.desc,
                        short_desc: event.desc.substring(0,200),
                        pic:  event_pic_url + event.picture,

                        place: {
                            id: event.placeId,
                            name: event.placeName,
                            type: event.placeType
                        },

                        dist: dist.substring(0,3),
                        lat: event.latitude,
                        long: event.longitude,
                    }
                });
                console.log("done");
                return d.promise();
            },
            error : function( xhr, type )
            {
                return null;
            } 
        });

        console.log("This shouldn't be logged before success.");

    }
};

我希望在 AJAX 调用后触发 console.log("No!") (在博客的第一部分中)。但从我在控制台日志中看到的情况来看，ajax 调用是在“成功之前不应记录此内容”之后执行的。已记录。并且完成永远不会被触发。我不知道为什么。

这是我的日志:

events
This shouldn't be logged before success.
success
Object 
2.3322972250333
done

如果我尝试使用 $.when(Event.getEvents() ...，则在“成功之前不应记录此内容”之后立即触发完成。

当我返回一个 promise 时，如何在 AJAX 调用结束后触发我的延迟对象？

谢谢

Answer 1

你的代码很奇怪:你试图将 getEvents 函数的结果传递给 $.when (它应该接受 jQuery 延迟对象)，但是 getEvents 根本没有 return 语句。

$.when 得到 undefined 并且实际上没有任何关系。我猜你的 getEvents 函数可能会返回 ajax 调用的结果，如下所示:

this.getEvents = function( lat, lng )
{
    // ... code
    return $.ajax({
       // ....
    });
}

我认为这可能只是解决方案的一部分，但我相信这是一个好的开始。

接下来，你为什么这么认为:

console.log("This shouldn't be logged before success.");

成功之前不能执行吗？您启动了异步调用，下一条语句是console.log。 JS 是单线程的，ajax 调用不可能在此 log 调用之前完成工作。这没有任何意义。

接下来，下面的代码是什么？

d.resolve =  ....

不是应该这样吗

d.resolve ( // ... );

？