jQuery：当通过 AJAX 有条件地请求数据时如何返回？

Question

我有一个函数调用另一个函数来获取数据。该数据可能在本地缓存，或者我可能不得不去获取它。本地缓存很容易。但是，如果我通过 $.getJSON 获取它，而不通过关闭异步来锁定浏览器，是否有某种方法仍然可以将该数据恢复到原始功能？

即在以下代码中：

1) 既然 parseData() 返回时 bar() 不再存在，那么 dataX 去哪儿了？

2) 如果没有 bar() 和 parseData() 都会调用的另一个回调层，并且在请求进行时没有锁定浏览器，我如何将 dataX 从 parseData() 恢复到 foo()？

var foo = function () {

    $('body').text(bar());

};

var bar = function () {

    var parseData = function (dataX) {
        // do something to data
        return dataX;
    };

    if (localStorage.hasOwnProperty('someKey')) {
        return localStorage.getItem('someKey');
    else {
        $.getJSON('http://somewhere.api.com?fubar=good', parseData);
    }

};

Answer 1

bar 函数没有返回，因此直接在 text() jQuery 函数中调用它不会设置任何文本（因为返回不是文本）。

您可以更改代码流以传入要更改其文本的元素，并让parseData 函数实际调用该元素的.text() 函数：

var foo = function () {

    //here we call the `bar` function and pass the element we want to change the text of as an argument
    bar('body');

};

var bar = function (element_str) {

    //here we use the argument we passed to create a jQuery object of the element to use later
    var $element = $(element_str);

    var parseData = function (dataX) {

        //instead of trying to return the value from the server, we just set the text of the element passed in
        $element.text(dataX);
    };

    if (localStorage.hasOwnProperty('someKey')) {

        //here we manually call the `parseData` function to add the locally stored string to the DOM
        parseData(localStorage.getItem('someKey'));
    else {

        //here we pass the `parseData` function as the callback function for this AJAX call so it can set the text in the DOM when the AJAX function has come back successfully
        $.getJSON('http://somewhere.api.com?fubar=good', parseData);
    }

};

Answer 2

进行异步调用时无法返回。而只是调用 foo 作为回调：

var foo = function (text) {

    $('body').text(text);

};

var bar = function () {

    var parseData = function (dataX) {
        // do something to data
        foo(dataX.someText);
    };

    if (localStorage.hasOwnProperty('someKey')) {
        foo(localStorage.getItem('someKey'));
    else {
        $.getJSON('http://somewhere.api.com?fubar=good', parseData);
    }

};

Answer 3

由于请求是异步的，因此这是不可能的，除非您请求的服务器支持 CORS，在这种情况下，您可以使请求同步。由于可能会导致糟糕的浏览器体验，我不建议这样做。

我建议允许bar 接受一个回调，您可以使用该回调在完成时执行操作。

编辑：

试试这个：

var foo = function () {

    $('body').text(bar());

};

var bar = function () {

    var parseData = function (dataX) {
        // do something to data
        localStorage.setItem('someKey',dataX);
        foo();
    };

    if (localStorage.hasOwnProperty('someKey')) {
        return localStorage.getItem('someKey');
    else {
        $.getJSON('http://somewhere.api.com?fubar=good', parseData);
        return "loading...";
    }

};

当浏览器不支持 localStorage 时会发生什么？还是您只是不针对那些浏览器。