Question

我的代码中存在很多问题，因为它不是同步的。这是我在chrome扩展中遇到的问题示例。这是我的功能

function getTranslation(a_data, callback)
{        
    var apiKey = '####'    
    var json_object = {};
    var url = '###';
    var xmlhttp;   
    var json_parsed = {};

    storage.get('data', function(items) 
    { 
        json_object = {  
            'text': a_data,
            'from' : items.data.from,
            'to' : items.data.to 
        };
        var json_data = JSON.stringify(json_object);

        if (window.XMLHttpRequest)
        {
            xmlhttp=new XMLHttpRequest();
        }
        else
        {
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.open("POST", url, false);
        xmlhttp.setRequestHeader("Content-type","application/json");          
        xmlhttp.setRequestHeader("Authorization","##apiKey=" + apiKey);                      
        xmlhttp.setRequestHeader("X-Requested-With","XMLHttpRequest");                      
        xmlhttp.send(json_data);

        json_parsed = JSON.parse(xmlhttp.responseText);
        callback(json_parsed.translation);
    });                      
}

这就是我在另一个函数中使用getTranslation函数的方法：

for (counter in toTranslateArray)
{
    getTranslation(toTranslateArray[counter],function(callback)
    {
        translated += callback;
        console.log(translated); //this is second and works
    });   
}
console.log(translated); //this is first and empty
//code depending on translated

那里有什么不对吗？

Answer 1

创建一个自定义事件监听器，在完成字符串化json_data（按照建议在回调内部完成）之后，它将触发事件以执行ajax调用。转到此处以了解有关cusotm事件JavaScript custom Event Listener

的更多信息

Answer 2

由于您使用的是同步XHR而不是ajax，因此您需要使用同步功能来保存数据，而不是chrome.storage，这是异步的。

在chrome.storage文档中，其功能之一是

它与批量读写操作异步，因此比阻塞和串行localStorage API更快。

但是阻止（和同步）是你想要的，那你为什么不改用那个API呢？

甚至更好：

将getTranslation()函数转换为异步。你只需要添加一个可以作为回调的第三个参数，并在嵌套的回调中使用它（因为如果你这样做，你也可以使用ajax而不是同步XHR）。

这就是正确的事情，但是如果你觉得懒惰并想要一种更简单的方法，那就做前者并将chrome.storage改为localStorage，你就完成了。

编辑：我看到你已经将你的功能改为异步。它似乎工作正常，但你更新了你的问题，你似乎有问题抓住为什么这条线不起作用：

console.log(translated); //this is first and empty

您需要了解面向事件的编程是如何工作的。您可能认为该行

for (counter in toTranslateArray)

包含getTranslation表示“对此toTranslateArray中的每个计数器进行翻译”，但实际上意味着“为此toTranslateArray中的每个计数器触发翻译事件”

这意味着当console.log执行此任务刚被解雇时;它不等待它完成。因此在那一刻翻译是空的。这是正常的，执行异步。

我不知道你需要用translated var完成一次，但是一旦数组的最后一项被处理，我会尝试触发一个不同的事件。

但无论如何，你需要做的是学习一些关于面向事件编程的教程或其他内容，这一切对你来说更有意义。

关于localStorage，我不知道，我发现这是chrome.storage文档中的替代方法，我真的不知道如何在你的情况下使用它。

但是由于javascript是面向事件的，我真的建议你学习事件而不是回到同步。但是取决于你。

Javascript同步函数 - chrome扩展

2 个答案: