[英]Firefox add-on stacked on the loops :(
This is my main.js: 这是我的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();
});
}
});
and my item.js: 和我的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);
});
});
Its seems that is working fine, BUT all the divs get appended by every item! 看来一切正常, 但是所有div都附加在每个项目后面! How i can mod it to place every item's fetch data only in this items and not in every item?
我如何修改它以将每个项目的获取数据仅放置在此项目中,而不是放置在每个项目中?
What i am doing wrong? 我做错了什么? I thinks its running twice!
我认为它运行了两次! Its like
runs = totalitems*2
. 像
runs = totalitems*2
。
If i force it to run for the first item only, everything is good! 如果我强迫它只运行第一个项目,那么一切都很好!
Sorry for my bad english! 对不起,我的英语不好! I know that is hard to understand it so i am waiting your comments
我知道这很难理解,所以我在等你的评论
as far as I can see, the problem in your code is here: 据我所知,您的代码中的问题在这里:
$.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);
});
});
Basically for each cycle of the loop, you're adding a new listener to the 'got-request-team' event. 基本上,对于循环的每个周期,您都要向“ got-request-team”事件添加一个新的侦听器。 Let's say you have only one item in
positions
: then, you associate to this event only one function, and when you emit the 'got-request-team', only that function is executed. 比方说,你在只有一个项目
positions
:那么,你联想到本次活动只有一个功能,当你发出“得到了请求团队”,仅执行该功能。 But, if you have, let's say, 20 items in the positions
array, you associate 20 different function to the same event, so when 'got-request-team' is emitted, all of them are executed. 但是,假设您在
positions
数组中有20个项目,则将20个不同的函数与同一个事件相关联,因此当发出“ got-request-team”时,将全部执行它们。
Also, because you created a closure, the variable position
inside the event listener will always have the last value set, and I believe it's not that your intention. 另外,由于您创建了一个闭包,因此事件监听器中的变量
position
将始终具有最后一个值集,我相信这并不是您的意图。 It's a common mistake, and you can find additional details here, for example: Closure needed for binding event handlers within a loop? 这是一个常见错误,您可以在此处找到其他详细信息,例如: 在循环中绑定事件处理程序是否需要关闭?
There are also some other small things (for example, I don't see replacediv
declared anywhere), but they're not related to your issue. 还有其他一些小事情(例如,我在任何地方都看不到
replacediv
声明),但它们与您的问题无关。
Hope it helps! 希望能帮助到你!
Update : about your comment, it's hard to answer without could test the code, but I believe your error is still in the piece above: first, more than positions
, it's position
that you have to "bind". 更新 :关于你的评论,这是很难回答没有可以测试的代码,但我相信你的错误仍然是在上面的一块:第一,超过
positions
,它的position
,你必须“绑定”。 Because you're in content script, you can use let
, therefore you can try something like that: 因为您使用的是内容脚本,所以可以使用
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);
});
});
Note that here you still have the problem of adding new listener to the same event for each item of positions
(that you said you have fixed), I just reuse this code to showing the usage of let
in this context. 请注意,这里仍然存在为每个
positions
项(您说已修复)将新的侦听器添加到同一事件的问题,我只是重复使用此代码来显示let
在此上下文中的用法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.