0

これは私の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。

最初のアイテムに対してのみ実行するように強制すると、すべてが良好になります。

私の悪い英語でごめんなさい！わかりにくいのでコメントをお待ちしております

4

1 に答える 1

0

私が見る限り、コードの問題は次のとおりです。

$.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」イベントに新しいリスナーを追加します。にアイテムが 1 つしかない場合positions、このイベントに関数を 1 つだけ関連付けます。「got-request-team」を発行すると、その関数だけが実行されます。しかし、たとえば配列に 20 個のアイテムがある場合、20 個のpositions異なる関数を同じイベントに関連付けます。したがって、'got-request-team' が発行されると、それらすべてが実行されます。

また、クロージャーを作成したためposition、イベントリスナー内の変数には常に最後の値が設定されますが、それはあなたの意図ではないと思います。これはよくある間違いであり、詳細についてはこちらを参照してください。たとえば、「ループ内でイベント ハンドラーをバインドするためにクロージャーが必要ですか?」などです。

他にもいくつかの小さなものがあります（たとえば、replacedivどこにも宣言されていません）が、それらはあなたの問題とは関係ありません。

それが役に立てば幸い！

更新：あなたのコメントについては、コードをテストできずに答えるのは難しいですが、あなたのエラーはまだ上記の部分にpositionsある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);
    });
});

ここでは、各アイテムの同じイベントに新しいリスナーを追加するという問題がまだ残っていることに注意してくださいpositions（修正したと言いました）。このコードを再利用してlet、このコンテキストでの使用法を示します。

于 2012-12-12T03:13:54.410 に答える