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

我第一次使用Web Workers，并且需要一些帮助使我的函数可以正常工作。Web Worker函数无法解析数组，返回单个结果

这是我的代码：

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是阵列;我希望工作人员使用Google地理编码API解析数组中每个项目的'lat'和'lon'，并返回城镇的名称。

当主函数收到消息时，会添加一个包含名称和时间戳的表。 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是一种用于执行后台功能，而不会阻塞有用页面的其余部分;解析坐标似乎是一个很好的应用程序，为此。我究竟做错了什么？

在此先感谢您的帮助。

来源

2015-09-15 Ferduun

有何帮助他们的职能而不是全球性的？ – Thilo

另外，你不能在回调中使用循环计数器'i'。在回调被调用的时候，循环已经结束了，'i'将会超过最后一次迭代（或者完全不同的东西）。 – Thilo

您的VAR i是引用这意味着将有循环的最后一个值，你应该使用一个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);

来源

2015-09-15 00:17:25 taxicala

还需要为'timestamp'做这件事。 – Thilo

也应用了时间戳的建议，并做出了正确的声明，现在我的值是3而不是4，但是否则结果相同。猜猜这意味着它现在停在正确的周期？（i = 3，显示4个元素） – Ferduun

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

回答

相关问题