जावास्क्रिप्ट/jQuery

Question

के माध्यम से अजाक्स HEAD अनुरोध मुझे HEAD अनुरोध बनाने और किसी सरणी में डेटा की अखंडता को बनाए रखने के साथ कुछ समस्याएं प्रतीत होती हैं।

var imageTemp = Array(); 

$('*') 
    .each(function(index){ 
     if($(this).css('background-image') != 'none'){ 
      imageTemp.push($(this).css('background-image').slice(5, -2)); 
     } 
    }); 

मैं एक विशिष्ट पृष्ठ पर सभी पृष्ठभूमि छवियों के यूआरएल पर कब्जा:

इस स्निपेट को देखते हुए। अब, Content-Length के लिए HEAD अनुरोध के माध्यम से प्रत्येक छवि का आकार उठाने का प्रयास कर, मैं इस स्निपेट का उपयोग:

var imageData = Array(); 

for(var i = 0; i < imageTemp.length; i++){ 
    ajaxSizeRequest = $.ajax({ 
     type: "HEAD", 
     async: true, 
     url: imageTemp[i], 
     success: function(message){ 
      imageData.push([imageTemp[i], ajaxSizeRequest.getResponseHeader('Content-Length')]); 
     } 
    }); 
} 

हालांकि, जब मैं imageData के माध्यम से console.log डंप, मैं प्रत्येक तत्व (जो URL को शामिल करते श्रृंखला होनी चाहिए और सामग्री-लंबाई) समाप्त होता है [undefined, XXXX] रूप XXXX हमेशा की तरह, Content-Length

मैं स्टंप्डया हूँ अनुरोध किया आखिरी के आकार है जहां हालांकि यह एक समय/देखते हुए इस मुद्दे को प्रतीत होता है। क्या मेरे पास यहां दौड़ने वाली एक तरह की दौड़-स्थिति है?

Answer 1

समस्या यह है कि एकल चर i और ajaxSizeRequest कॉलबैक फ़ंक्शन द्वारा कब्जा कर लिया जा रहा है कॉलबैक फ़ंक्शन के सभी उदाहरणों के लिए एक ही चर रहे हैं। मुझे लगता है कि यदि आप कोई फ़ंक्शन कॉल करते हैं और इंडेक्स वैरिएबल को पास करते हैं और साथ ही फ़ंक्शन पर स्थानीय रूप से अनुरोध चर का दायरा किए गए हैंडलर के प्रतिक्रिया पैरामीटर का उपयोग करते हैं, तो आपको स्वतंत्र चर के साथ समाप्त होना चाहिए कॉलबैक इसके बाद प्रत्येक सरणी तत्व और प्रत्येक प्रतिक्रिया चर सही ढंग से संदर्भित करना चाहिए।

var imageData = Array(); 

for(var i = 0; i < imageTemp.length; i++){ 
    updateImageData(i); 
} 

function updateImageData(i) 
    $.ajax({ 
     type: "HEAD", 
     async: true, 
     url: imageTemp[i], 
    }).done(function(message,text,jqXHR){ 
     imageData.push([imageTemp[i], jqXHR.getResponseHeader('Content-Length')]); 
    }); 
} 

Answer 2

आपके पास एक ही i वैरिएबल है जो सभी कॉलबैक द्वारा साझा किया जाता है।
चूंकि AJAX असीमित है, आपके लूप के समाप्त होने के बाद चलने वाले सभी कॉलबैक, और वे सभी एक ही i प्राप्त करते हैं।

इसे ठीक करने के लिए, आपको AJAX कॉल को एक अलग फ़ंक्शन में स्थानांतरित करने की आवश्यकता है जो पैरामीटर के रूप में i लेता है।
इस प्रकार, प्रत्येक कॉलबैक को अलग i पैरामीटर मिलेगा।

Answer 3

अपने i नहीं है ठीक से बंद-इन

तरह लग रहा है के अलावा, आप ajaxSizeRequest उपयोग नहीं कर सकते, क्योंकि यह बहुत सिर्फ एक अनुरोध की ओर इशारा करते है (शायद आखिरी, क्योंकि पाश बहुत तेजी से निष्पादित करेंगे)

इस प्रकार

सिर्फ अपने success कॉलबैक फ़ंक्शन लपेट, ajaxSizeRequest के संदर्भ बदल रहा है:

success: (function(i){ 
    return function(data,status,xhr){ 
    imageData.push([imageTemp[i], xhr.getResponseHeader('Content-Length')]); 
    }; 
})(i) 

Answer 4

आप गुंजाइश मुझे बहुत पसंद कर सकते हैं:

+०१२३५१६४१०६१

success: function(i){ 
    return function(message){ 
     imageData.push([imageTemp[i], ajaxSizeRequest.getResponseHeader('Content-Length')]); 
    } 
}(i) 

Answer 5

किसी को अब भी इस के साथ परेशानी हो रही है, और के बाद से इस पोस्ट है, जैसे, 5 साल की उम्र में पहले से ही है, यहाँ जवाब का एक और अधिक 'आधुनिक' संस्करण है, तो: सिर्फ let बजाय var मूल पोस्ट में उपयोग करें for पाश।

जानकारी: Is there any reason to use the “var” keyword in ES6? और: MDN - Let syntax

एक `ajaxSizeRequest` चर के बजाय