Question

我第一次使用Web Workers，需要一些帮助才能使我的功能正常工作。

这是我的代码：

var myWorker = new Worker('./js/worker.js');

...

for(i = 0; i < passaggi.length; i++) {
     lat = passaggi[i].lat;
     lon = passaggi[i].lon;
     timestamp = passaggi[i].timestamp;



     myWorker.postMessage([lat, lon]);
     myWorker.onmessage = function(e) {

         console.log('Message received from worker');
         nome = e.data
         tmp = "<table border='1'><tr><td>" + i + "</td><td>" + nome + "</td><td>" + timestamp + "</td></tr></table>";
         tabella.innerHTML += tmp;


     }
}

Passaggi是一个阵列;我希望工人解析＆＃39; lat＆＃39;和＆＃39; lon＆＃39;使用Google Geocoding API对数组中的每个项目进行返回，返回城镇的名称。

当主函数收到消息时，会添加一个包含名称和时间戳的表。 Tabella是包含它的div。

问题是，该函数创建了正确数量的表，但每个表都包含passaggi中最后一个元素的数据！输出示例：

| 4 | Rome | 2015-09-14 23:44:38 |
| 4 | Rome | 2015-09-14 23:44:38 |
| 4 | Rome | 2015-09-14 23:44:38 |
| 4 | Rome | 2015-09-14 23:44:38 |

这是worker.js的内容，但代码似乎没问题：

onmessage = function(data){

        var mapAPI = "http://maps.googleapis.com/maps/api/geocode/json?latlng=" + data.data[0] + "," + data.data[1] + "&sensor=true";


        var req = new XMLHttpRequest();
        req.open('GET', mapAPI, true);
        req.onreadystatechange = function (aEvt) {
            if (req.readyState == 4){
                if(req.status == 200){
                    result = JSON.parse(req.responseText);
                    console.log(result);
                    message = result.results[0].address_components[2].long_name;
                    postMessage(message);
                }
            else
                console.log("Error loading page\n");

            }
        }
    req.send(null);
}

据我所知，Web Workers对于在后台执行函数非常有用，而不会阻塞页面的其余部分;解析坐标似乎是一个很好的应用程序。我做错了什么？

提前感谢您的帮助。

Answer 1

你的var i是一个引用意味着它将具有循环的Last值，你应该使用IIFE：

(function(i) {
    myWorker.onmessage = function(e) {

     console.log('Message received from worker');
     nome = e.data
     tmp = "<table border='1'><tr><td>" + i + "</td><td>" + nome + "</td><td>" + timestamp + "</td></tr></table>";
     tabella.innerHTML += tmp;


 }})(i);

Web Worker函数无法解析数组，返回单个结果

1 个答案: