javascript - javascript/jquery 中函数的执行

Question

我有一个功能可以让用户获得较长的时间。我需要让它根据用户位置返回一个 url，该 url 会有所不同。返回的 url 用于 ajax 调用。然而，在我的第一个函数完成之前，第二个 ajax 调用就被命中，然后由于 url 未定义而给出 404。

所以我的代码是:

$(document).ready(function () {
   getLatLong();

   if (!hasTicket) {
        doAction();
    } else {
        doAnotherAction();
        $.unblockUI();
    }
});

function doAction() {
         $.ajax({
            url: url, // this is where I am failing
            type: 'POST',
            success: function (response) {
                ticket = response.data.ticket;
                $.unblockUI();
            },
            error: function (xhr) {
                $.unblockUI();
                errorHandler("Failed" + xhr.status);
            }
        });
}

function getLatLong() {
    if (Modernizr.geolocation) {
        navigator.geolocation.getCurrentPosition(
            function (position) {
                getUrl(position.coords.latitude, position.coords.longitude);
            },
            getUrlFallback,
            { enableHighAccuracy: false, timeout: 10000, maximumAge: 360000 }
        );
    } else {
        getUrlFallback();
    }
}

function getUrl(latitude, longitude) {
    $.ajax({
        url: 'api/Controller/Action',
        type: 'GET',
        async: false, // tried making this synchronous
        data: {
            latitude: latitude,
            longitude: longitude
        },
        success: function (data) {
            url = data;
        },
        error: function (xhr) {
            errorHandler("Failed to get users nearest url: " + xhr.status);
        }
    });
}

所以我调用 getLatLong，然后调用我的 getUrl ajax 函数，该函数将 async 设置为 false，但是我认为它首先从 getLatLong 返回，因为我的 doAction 函数被调用，然后 url 变得未定义。

如何确保 getLatLong 和 getUrl 在 doAction 运行之前完全完成？

我尝试复制调用 getLatLong() 后发生的功能；进入一个函数并使用 $.when adn .then 如下，但在设置 url 之前它仍然进入 doAction 方法。

function callAction() {
       if (!hasTicket) {
            doAction();
        } else {
            doAnotherAction();
            $.unblockUI();
        }
}

然后我准备好了以下文档:

$(document).ready(function () {

    $.when(getLatLong()).then(callAction());
});

编辑 - 使用 getUrlFallback 函数更新

function getUrlFallback () {
    // uses 3rd party geoPlugin
    getUrl(geoplugin_latitude(), geoplugin_longitude());
}

Answer 1

您可以转换您的getLatLong调用返回 jQuery Promise :

(注意:我没有在此处包含 getUrlFallback 逻辑，因为您没有包含该代码，所以我无法告诉它应该做什么):

function getLatLong() {
    return $.Deferred(function(def) {
         if (!Modernizr.geolocation) {
             def.resolve(geoplugin_latitude(), geoplugin_longitude());
         } else {
             navigator.geolocation.getCurrentPosition(
                 function(position) {
                     def.resolve(position.coords.latitude, position.coords.longitude);
                 },
                 def.resolve(geoplugin_latitude(), geopugin_longitude()),
                 { enableHighAccuracy: false, timeout: 10000, maximumAge: 360000 }
             );
         }
    }).promise();
}

并且还修改getUrl这样它return是 $.ajax 的结果，并省略success和error回调:

function getUrl(latitude, longitude) {
    return $.ajax(...);
}

所以你现在可以使用:

getLatLong().then(getUrl).then(callAction);   // NB: no () after callAction

callAction将自动传递 URL，而不是将其存储在外部作用域的变量中。

现在请注意 getLatLong 如何函数现在专门做到这一点，而且仅做到这一点。随后它不会尝试将纬度/经度转换为 URL，因为 getUrl为您执行此操作(无论 URL 来自 GeoAPI 还是 geoplugin )。