for 循环中的 Javascript sharedworker

Question

我正在尝试在 for 循环中创建 7 个 Javascript 共享工作者。 我的 IDE (Pycharm) 对这两个变量 container-frame 和 worker 发出警告：

“可变变量可以从闭包中访问”

每个共享工作者都在与 network_worker.js 通信

下面是我的 JS 代码：

socket = io.connect('http://' + document.domain + ':4999/layout');
// Set up CSS
for (var i=0; i<player_dict.length; i++) {
    var _id = player_dict[i]['_id'];
    var container_frame = document.getElementById("container-frame-" + _id);
    container_frame.style.display = "none";

    setup_communication();
    console.log(_id)
    var client_id = _id;
    var alarm_flag= "";
    var alarm_metric="";
    if (client_id != null && client_id == 0 && parseInt(location.port) == 4999) {  // player_0_hack (for now). Remove and have work properly.
        label = "";
    } else if (client_id != null){
        label = "Service " +  (parseInt(location.port) - 5000 + 1);
    } else {
        label = "Invalid player id";
    }
    var worker = new SharedWorker('../static/js/network_worker.js', client_id);
    console.log(worker);
    worker.port.addEventListener('message', worker_callback, false);

    window.addEventListener("beforeunload", function () {
        worker.port.postMessage('label_close');
    });
    worker.port.start();

    function worker_callback(e) {
        console.log(e.data)
        if(e.data.type == "update_label") {
            console.log(container_frame)
            container_frame.style.animationDuration =  Math.random() + "s";
        }
    }

    worker.port.postMessage({type: "label_connection", payload: {domain: document.domain, port: location.port, client_id: client_id, label: label}, alarm_flag: alarm_flag, alarm_rate: 1, alarm_metric: alarm_metric});
}

最终，我要做的是为 7 个 HTML 元素的容器框架设置动画。我正在使用 for 循环遍历这些元素。当从 JS 脚本（更新标签）触发事件时会发生这些动画。

目前，我有 7 个 HTML 元素。只有最后一个元素使动画正常工作。

我的疑问是，当我将 worker_callback 函数放在 for 循环中时，JS 编译器对 container_frame 的范围感到困惑，但我不确定。

有什么建议吗？

Answer 1

问题是两个变量 container_frame 和 worker 定义为 var 而不是 const。感谢@Edmund Lee