javascript - Html web worker 没有按预期工作

问题描述

我有以下代码main.html

if(typeof(Worker) !== "undefined") {
        if(typeof(w) == "undefined") {
            w = new Worker("/location_worker.js");
        }
        w.onmessage = function(event) {
        sequence = event.data;
        if(Cookies.get("location_tracked") == "done")
        {
            w.terminate();
            w = undefined;
            return;
        }
        if(navigator.geolocation)
        {
            navigator.geolocation.getCurrentPosition(function(position)
            {
                lat = position.coords.latitude;
                lon = position.coords.longitude;
                $.ajax({
                  type: "POST",
                  url: "/api/",
                  data: {'action':'receive_loc', 'lat': lat,'lon': lon,'enc_data': enc_data,'reached': reached , 'sequence' : sequence },
                  success: function(jres)
                  {
                    res = JSON.parse(jres);

                    stop = false;

                    if(res.status == 11)
                    {
                        stop = true;
                    }


                    if(!stop)
                    {
                        //loop continues
                    }else{
                        finished = true;
                        w.terminate();
                        w = undefined;
                        return;
                    }
                  },
                });
            },function(code, message) {
                $('#error').html("<b>Location Sharing blocked by User..</b>");
            });


        } else{
            alert("Sorry, your browser does not support HTML5 geolocation.");
        }

        };
    } else {
        document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers...";
    }

并且location_worker.js包含在下面

var i = 0;
var ft = 2000;
function timedCount() {
    i = i + 1;
    self.postMessage(i);
    console.log(i);
    setTimeout("timedCount()",ft);
}
timedCount();

因此每 2 秒将提交一次 ajax，它工作正常，但在以下情况下它不能按预期工作

例如，如果序列 1 和 2 工作正常并且选项卡/浏览器处于非活动状态，并且一段时间后如果我返回此页面，则所有后续请求（应该在选项卡处于非活动状态时发送）将同时发送（序列 3,4,5,6,7,8,9 等）。所以所有这些请求都发送具有相同纬度值的相同数据，这是不应该发生的。

有人请让我知道这个流程有什么问题。

标签： javascripthtmlajaxasynchronousweb-worker

解决方案

当标签没有焦点时，您的代码会被限制。如果您想确保您不会在两秒钟内拨打两个电话，请使用Date.now跟踪您上次拨打电话的时间，如果当前通话时间在 2000 以内，则不要再拨打电话Date.now。例如，就在您的message处理程序之外：

var nextAllowed = Date.now();

然后就在里面：

if (Date.now() < nextAllowed) {
    return;
}
nextAllowed = Date.now() + 2000;

我碰巧注意到有关您可能要考虑更改的代码的一些事情：

那个网络工作者根本没有意义，只需将那个计时器循环放在你的主页代码中。
typeof不是函数，无需将其操作数包装在().
不要将字符串setTimeout传递给，而是传递函数引用。所以：setTimeout(timedCount, ft);
除非您有未显示的声明，否则您的代码将成为我所说的隐式全局恐怖的var牺牲品。声明您的变量（如、等）。wsequence
如果您的/api/端点正确识别了Content-Type响应，您就不必JSON.parse在 ajax 回调中使用。通常，请尝试确保使用正确的Content-Typeheder 发送响应。

javascript - Html web worker 没有按预期工作

问题描述

解决方案

推荐阅读