1

以下のように約10個のXMLHTTPリクエストを作成したいと思います。i最初の「子」参照にの値を使用したいのですがi、コールバックが実行される前に変更されるため、値はi「結果」タブで取得されたURLと一致しません。これを一般化するにはどうすればよいですか？

var i = 1;
WinJS.xhr({
    url: root.results[i].profile_image_url_https,
    responseType: 'blob'
}).done(function (result) {
    var imgTag = theDiv.children[1].children[0];
    var imageBlob = URL.createObjectURL(result.response, {
        oneTimeOnly: true
    });
    imgTag.src = imageBlob; //tempLocalUrl;
});

i = 2;

WinJS.xhr({
    url: root.results[i].profile_image_url_https,
    responseType: 'blob'
}).done(function (result) {
    var imgTag = theDiv.children[2].children[0];
    var imageBlob = URL.createObjectURL(result.response, {
        oneTimeOnly: true
    });
    imgTag.src = imageBlob; //tempLocalUrl;
});
4

5 に答える 5

2

一般的な方法は、追加の関数（すぐに実行される）を使用して、ループ変数の現在の値をキャプチャすることです。例：

var i = 1;

WinJS.xhr({
    url: root.results[i].profile_image_url_https,
    responseType: 'blob'
}).done(function (inner_i) {
  // return the actual callback
  return function (result) {
    // use `inner_i` as needed
    var imgTag = theDiv.children[1].children[0];
    var imageBlob = URL.createObjectURL(result.response, {
      oneTimeOnly: true
    });
    imgTag.src = imageBlob; //tempLocalUrl;
  };
}(i)); // <= pass outer `i`
于 2012-11-30T10:27:00.257 に答える
1

一般に、2つのことができます。

  1. 追加の関数を使用する
  2. 追加の変数を使用する

{}からのargumentobjectWinJS.xhrには、変数をコピーするスコープがないため、オプション1を使用します。

var i = 1;
WinJS.xhr({
    url: root.results[ return function(i) { return i; }(i) ].profile_image_url_https,
    responseType: 'blob'
}).done(function (result) {
    var imgTag = theDiv.children[1].children[0];
    var imageBlob = URL.createObjectURL(result.response, {
        oneTimeOnly: true
    });
    imgTag.src = imageBlob; //tempLocalUrl;
});

i = 2;

WinJS.xhr({
    url: root.results[ return function(i) { return i; }(i) ].profile_image_url_https,
    responseType: 'blob'
}).done(function (result) {
    var imgTag = theDiv.children[2].children[0];
    var imageBlob = URL.createObjectURL(result.response, {
        oneTimeOnly: true
    });
    imgTag.src = imageBlob; //tempLocalUrl;
});

更新：追加の変数：

var i = 1;
WinJS.xhr({
    copiedVar: i,
    url: root.results[ copiedVar ].profile_image_url_https,
    responseType: 'blob'
}).done(function (result) {
    var imgTag = theDiv.children[1].children[0];
    var imageBlob = URL.createObjectURL(result.response, {
        oneTimeOnly: true
    });
    imgTag.src = imageBlob; //tempLocalUrl;
});

i = 2;

WinJS.xhr({
    copiedVar: i,
    url: root.results[ copiedVar ].profile_image_url_https,
    responseType: 'blob'
}).done(function (result) {
    var imgTag = theDiv.children[2].children[0];
    var imageBlob = URL.createObjectURL(result.response, {
        oneTimeOnly: true
    });
    imgTag.src = imageBlob; //tempLocalUrl;
});
于 2012-11-30T10:20:43.760 に答える
0

コールバック関数内でiの値をインクリメントできます。そうすれば、使用されるまで増分されません。

var i = 1;

WinJS.xhr({
    url: root.results[i].profile_image_url_https,
    responseType: 'blob'
}).done(function (result) {
    var imgTag = theDiv.children[1].children[0];
    var imageBlob = URL.createObjectURL(result.response, {
        oneTimeOnly: true
    });
    imgTag.src = imageBlob; //tempLocalUrl;

    i++;

});
于 2012-11-30T10:19:42.390 に答える
0

この場合、コールバックの値をインクリメントすると可能性があります。しかし、このスコープの問題を解決する一般的な方法は、JavaScriptクロージャを使用することです。http://jibbering.com/faq/notes/closures/をご覧ください

于 2012-11-30T10:27:27.950 に答える
-1

これは、ネストされた結合されたPromiseを使用するアプローチを検討する素晴らしいケースです。

var operations = [];
for(var i = 0; i < 10; i++) {
    operations.push(WinJS.join({
        myValue: i,
        xhr: WinJS.xhr({ url: "http://foo" }),
    }).then(function(data) {
       var yourValue = data.myValue;
       var xhrResponse = data.xhr;

       // Your processing you had before
    }));
 }

 WinJS.Promise.join(operations).done(function(operations) {
     // Done
 });

これにより、物事を隔離して封じ込める機会が得られます。

于 2012-11-30T17:39:16.210 に答える