Javascript 同步函数 - chrome 扩展

标签 javascript google-chrome-extension synchronous

<分区>

我的代码有很多问题，因为它不是同步的。这是我在 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

那里有什么问题吗？

最佳答案

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

在chrome.storage文档，它的一个特点是

It's asynchronous with bulk read and write operations, and therefore faster than the blocking and serial 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 扩展，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18214286/

上一篇：javascript - 强制哈希更改的最佳方法是什么？

下一篇：javascript - 不使用路由的 Angular 重新加载模板 + Controller

相关文章：

javascript - Socket.io-client 没有默认导出

javascript - 在 Node.js 中创建 "intermediate"流

javascript - FullCalendar V4 中的 refetchEvents 的等效项

javascript - Chrome 扩展程序 : Message Passing (Sending the DOM to popup. js) 返回 'null'

html - 用于复制具有样式的页面元素的附加组件

javascript - 同时发送 XMLHttpRequest

mysql - 没有回调的nodejs mysql

mvvm - 明确等待异步操作完成？

JavaScript 函数未在 C# 代码中定义

c - stm32中usart的同步模式(spi模式)