-1

我试图计算我正在查询的数据库中有多少项目。它是第三方的，所以它是跨域的 XMLHttpRequests，但我在 Chrome 扩展中创建该方法，并且 manifest.json 中的权限位让它运行良好。

我似乎遇到的问题是：在 XMLHttpRequests 从外部服务器返回之前，我正在遍历一个类别列表并计算每个类别的数量。这些方法通过按下 id="countButton" 的按钮来启动。这是相关的javascript/jQuery：

//simple listener for the button
document.getElementById('countButton').addEventListener('click', function() runTotalCount()}, true);

//loops through a list of categories in a drop down with values 0-36
function runTotalCount(){
    var sum = 0;
    $('#categorySelect option').each(function(){
        var value = $(this).val();
        sum += retrieveCategoryCount(value);
        alert("New Sum = " + sum);
    });
    var total = "<p>Total items in Sum is " + sum + "</p>";
    document.getElementById('results').innerHTML = total;
}

//actually makes the request and sums the items count for each category
//the server response is a json with an alphabetized "items" per category
function retrieveCategoryCount(num){
    var sum = 0;
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if (xhr.readyState == 4 && xhr.status == 200){
            var str = xhr.responseText;
            alert("str = " + str);
            var json = $.parseJSON(str);
            alert("JSON = " + json);
            for(item in json.alpha){
                alert("items count = " + json.alpha[item].items);
                sum += json.alpha[item].items;
            }
        alert("Category Sum = " + sum);
        return sum;
        }
    }
    xhr.open(
        "GET",
        "http://services.runescape.com/m=itemdb_rs/api/catalogue/category.json?category=" + num,
        true);
    xhr.send(null);
}

因为它是onreadystatefor中的东西retrieveCategoryCount永远不会被调用，因为 XMLHttpRequests 在函数完成时仍然处于未决状态。在同步调用中，alert("Category Sum = " + sum);返回正确的数字，但函数返回正下方是 NaN（我宁愿不挂断浏览器，但我更喜欢异步的解决方案）。

需要更改哪些内容才能正确获取项目计数？提前致谢。

更新：我也试过retrieveCategoryCount这个代码：

function retrieveCategoryCount(num){
    var sum = 0;
    $.getJSON("http://services.runescape.com/m=itemdb_rs/api/catalogue/category.json?category=" + num, function(data){
        for(item in data.alpha){
            alert("items count = " + data.alpha[item].items);
            sum += data.alpha[item].items;
        }
    alert("Category Sum = " + sum);
    return sum;
    });
}

这里的问题是回调永远不会运行，因为从函数返回的值添加到“sum”时请求仍然处于挂起状态。

4

2 回答 2

0

您传递给的回调函数onreadystatechange不是retrieveCategoryCount。它的返回值丢失了，因为该函数仅在响应 readystatechange 事件时被调用。

对回调中的数据做你需要做的事情。不要试图返回数据。

于 2012-04-26T14:56:40.713 回答
0

您可以将异步调用完成后应该发生的代码放入回调函数中，并将其传递给您的异步函数，然后让它回调。

var sum = 0,
    setTotalCount = function(data){ 
        .. stuff to set the dom element based on callback
    };
$('#categorySelect option').each(function(){
    var value = $(this).val();
    retrieveCategoryCount(value, setTotalCount);
});


function retrieveCategoryCount(num, callback){
var sum = 0;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if (xhr.readyState == 4 && xhr.status == 200){
        var str = xhr.responseText;
        alert("str = " + str);
        var json = $.parseJSON(str);
        alert("JSON = " + json);
        for(item in json.alpha){
            alert("items count = " + json.alpha[item].items);
            sum += json.alpha[item].items;
        }
    alert("Category Sum = " + sum);
       callback(sum); // callback the function you passed in
    }
}
xhr.open(
    "GET",
    "http://services.runescape.com/m=itemdb_rs/api/catalogue/category.json?category=" + num,
    true);
xhr.send(null);
}
于 2012-04-26T14:55:11.053 回答