Question

这是我的main.js：

var data = require("self").data;
var window = require("window-utils").activeBrowserWindow;
var tabs = require("tabs");
var Request = require("request").Request;

var team = require("page-mod").PageMod({
include: ["http://www.example.com/team/*"],
contentScriptFile: [data.url("jquery.js"), data.url("item.js")],
contentScriptWhen: 'ready',
onAttach: function(worker) {

        worker.port.on('got-id', function(id) {
        var requesturl = "http://www.othersite.com/item/" + id;   

        Request({
            url: requesturl,
            onComplete: function(response) {
                worker.port.emit('got-request', response.text);
            }
        }).get();

    });
}
});

和我的item.js：

// Getting number of total items in the page
var totalitems = document.getElementById("NumberOfItems").textContent;
totalitems = parseInt(totalitems);
// Creating array for items position
positions = [];
for ( z = 0; z <= totalplayers-1 ; z++ ) { positions.push(z < 10 ? ("0" + z.toString()) : z.toString()); }
$.each( positions, function(players, position) {
// Getting item id for the request
var player_id = $("#item-position" + position).attr("href").match(RegExp('items/([^/]+)/details.aspx$'))[1];
self.port.emit('got-player-id-team', player_id);

self.port.on('got-request-team', function(data) {
var columns = $('div.columns',data);
replacediv = $("div#itembox").eq(position).find('td').eq(3);
replacediv.append(columns);
});
});

它看起来工作正常，但是所有div都会被每个项目追加！我如何修改它来将每个项目的获取数据仅放在这个项目而不是每个项目中？

我做错了什么？我认为它跑了两次！它就像runs = totalitems*2。

如果我强迫它只运行第一项，一切都很好！

抱歉我的英语不好！我知道这很难理解，所以我在等你的评论

Answer 1

据我所知，您的代码中存在问题：

$.each( positions, function(players, position) {
    // ...
    self.port.on('got-request-team', function(data) {
        var columns = $('div.columns',data);
        replacediv = $("div#itembox").eq(position).find('td').eq(3);
        replacediv.append(columns);
    });
});

基本上，对于循环的每个循环，您都要为'got-request-team'事件添加一个新的监听器。假设您在positions中只有一个项目：那么，您只将一个函数与此事件关联起来，当您发出'got-request-team'时，只执行该函数。但是，如果您有positions数组中的20个项目，则将20个不同的函数关联到同一事件，因此当发出'got-request-team'时，所有这些都将被执行。

另外，因为你创建了一个闭包，事件监听器中的变量position将始终设置最后一个值，我相信这不是你的意图。这是一个常见错误，您可以在此处找到其他详细信息，例如：Closure needed for binding event handlers within a loop?

还有一些其他小事（例如，我没有在任何地方看到replacediv声明），但它们与您的问题无关。

希望它有所帮助！

更新：关于您的评论，如果没有测试代码就很难回答，但我相信您的错误仍然存在于上面：首先，超过positions，它是{ {1}}你必须“绑定”。因为您使用的是内容脚本，所以可以使用position，因此您可以尝试这样的内容：

let

请注意，在这里，您仍然遇到为$.each(positions, function(players, position) { // ... let pos = position; // let is block scope self.port.on('got-request-team', function(data) { var columns = $('div.columns',data); replacediv = $("div#itembox").eq(pos).find('td').eq(3); // use pos here replacediv.append(columns); }); });的每个项目添加新侦听器到同一事件的问题（您说已修复），我只是重复使用此代码来显示{{1在这种情况下。

Firefox加载项堆叠在循环上:(

1 个答案: