Question

我正在努力将一些网址轮询请求卸载给网络工作者。为此，我需要从invokation的DOM元素中获取某些属性，将它们传递给url请求，然后使用结果更新原始DOM元素。由于多个DOM元素使用此函数来获取更新，因此我需要传递$(this)或等效的唯一标识符以确保更新正确的元素。

我从"Passing objects to a web worker"和"Can I pass a jQuery object to a web worker"这样的问题中了解到这是不可能的，所以我正在寻找一种模仿这种方法的方法。

以下是我的代码的大致轮廓：

//main.js
function update(){
    var data = { 'id'     : $(this).attr('itemid'),
                 'filter' : $(this).attr('filter')}
    updatePoller.postMessage(data);
}

//worker.js
this.onmessage = function(e){
    //format params from e.data
    //make GET request to url
    //when done...
    postMessage(req.responseText);
}

//main.js (again)
updatePoller.onmessage = function(message){
    //process response
    //update child elements of $(this)
}

如您所见，我不需要访问Web worker中的$(this)，但是在请求返回后我需要引用以更新正确的元素。有没有办法通过Web worker传递对DOM元素的唯一引用？

Answer 1

当您无法使用其引用时，唯一标识元素的常用方法是使用id。或者，您可以使用data-*属性，但实际上id是为此特定目的而制作的。

所以（见评论）：

//main.js
var lastId = 0;
function update(){
    // Assign ID if necessary
    if (!this.id) {
        ++lastId;
        this.id = "__auto" + lastId;
    }
    var data = { 'id'       : $(this).attr('itemid'),
                 'filter'   : $(this).attr('filter'),
                 'elementId': this.id}
    updatePoller.postMessage(data);
}

//main.js (again)
updatePoller.onmessage = function(message){
    // Use the `element` value sent back to look it up by ID:
    $("#" + message.data.elementId).xyz();
}

如果拥有所有这些自动全局变量（因为id值创建自动全局变量）让你烦恼，你可以在完成后删除ID：

//main.js (again)
updatePoller.onmessage = function(message){
    var elm = $("#" + message.data.elementId);
    if (elm.attr("id").startsWith("__auto")) {  // auto ID?
        elm.attr("id", "");                     // remove it
    }
    elm.xyz();
}

或少用jQuery：

//main.js (again)
updatePoller.onmessage = function(message){
    var elm = $("#" + message.data.elementId)[0];
    if (elm && elm.id.startsWith("__auto")) {
        elm.id = "";
    }
    $(elm).xyz();
}

通过Web Worker传递jQuery引用

1 个答案: