Javascript同步函数-chrome扩展

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

由于您使用的是sync XHR，而不是ajax，因此需要使用sync函数来保存数据，而不是异步的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)

其包含CCD_ 6表示"强"；将其中的每个计数器转换为TranslateArray"，但实际上意味着"strong>"；为这个toTranslateArray"中的每个计数器激发一个转换事件。

这意味着当console.log被执行时，这些任务刚刚被触发；它不等待它完成。所以翻译在那一刻是空的。这很正常，是异步执行的。

我不知道一旦translated var完成，你需要对它做什么，但一旦数组的最后一项得到处理，我会尝试激发一个不同的事件。

但无论如何，你需要做的是学习一些关于面向事件编程的教程或东西，这样所有这些对你来说都更有意义。

关于localStorage，我不知道，我在chrome.storage文档中发现了它作为一种替代方案，我真的不知道如何在您的情况下使用它。

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

Answer 2

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