image.onload फ़ंक्शन के साथ

Question

मेरे पास एक जेएस फ़ंक्शन है जहां एक मान की गणना की जाती है और यह मान वापस किया जाना चाहिए, लेकिन मुझे हर बार undefined मिलता है लेकिन यदि मैं console.log() परिणाम इस फ़ंक्शन के भीतर काम करता है। क्या आप सहायता कर सकते हैं?

function detect(URL) { 
    var image = new Image(); 
    image.src = URL; 
    image.onload = function() { 
     var result = [{ x: 45, y: 56 }]; // An example result 
     return result; // Doesn't work 
    } 
} 

alert(detect('image.png')); 

Answer 1

मैं इसे अपने आप मिल:

मुझे पता नहीं था कि मुझे लगता है कि करने के लिए एक चर असाइन कर सकते हैं (मुझे पहले से ही सौंपा तलाश के लिए) ऑनलोड।

function detect(URL) { 
    var image = new Image(); 
    image.src = URL; 
    var x = image.onload = function() { 
     var result = [{ x: 45, y: 56 }]; // An example result 
     return result; 
    }(); 
    return x; 
} 

alert(detect('x')); 

Answer 2

detect() कोई मूल्य नहीं लौटाता है। अगर आप एक चेतावनी प्राप्त करना चाहते हैं, return result;alert(result) द्वारा प्रतिस्थापित करें।

अपने कोड के विश्लेषण:

function detect(URL) { 
    ... 
    image.onload = function(){ //assigning an event handler (function) to an object 
     ... 
     return result; //this return statement is called from within another function 
    } 
}//function "detect" ends here. No return statement has been encountered 

Answer 3

आपका समारोह detect कुछ भी वापस नहीं करता है, जिसके कारण alert दिखाया जा रहा है "अनिर्धारित"। return कथन जो आप दावा करते हैं वह काम नहीं करता है, जो आप image.onload पर असाइन किए गए अज्ञात फ़ंक्शन से लौट रहे हैं, और यदि आप फ़ंक्शन पर कॉल करेंगे तो शायद ठीक काम करता है।

Answer 4

ऐसा इसलिए है क्योंकि फ़ंक्शन का पता लगने के बाद लोड ईवेंट होने के बाद फ़ंक्शन का पता कुछ भी वापस नहीं आता है। और आप छवि को किसी चीज़ में जोड़ना भूल गए हैं, इसलिए यह कभी लोड नहीं होता है।

आप की तरह कुछ कर सकता है:

function detect(URL) { 
    var image = new Image(); 
    image.src = URL; 
    image.onload = function() { 
     var result = 'result'; // An example result 
     alert(result); // Doesn't work 
    } 
    document.body.appendChild(image) 
} 

detect('http://www.roseindia.net/javascript/appendChild-1.gif'); 

बेला यहाँ http://jsfiddle.net/LVRuQ/

Answer 5

मान दिया जाता है, लेकिन detect समारोह से नहीं।

आप एक गुमनाम समारोह के बजाय लोड ईवेंट हैंडलर के लिए एक नामित समारोह का उपयोग करते हैं, यह स्पष्ट है क्या हो रहा है:

function handleLoad() { 
    var result = [{ x: 45, y: 56 }]; 
    return result; 
} 

function detect(URL) { 
    var image = new Image(); 
    image.src = URL; 
    image.onload = handleLoad; 
} 

मूल्य कोड कि ईवेंट हैंडलर कॉल करने के लिए handleLoad समारोह से वापस आ रहा है, लेकिन detect फ़ंक्शन पहले से ही बाहर निकल चुका है। फ़ंक्शन में return कथन भी नहीं है, इसलिए आप परिणाम को undefined पर कुछ भी उम्मीद नहीं कर सकते हैं।

:

function detect(URL, callback) { 
    var image = new Image(); 
    image.src = URL; 
    image.onload = function() { 
    var result = [{ x: 45, y: 56 }]; 
    callback(result); 
    }; 
} 

आप एक कॉलबैक, जो एक बार मूल्य उपलब्ध है बुलाया जाएगा साथ detect फ़ंक्शन को कॉल करें:

एक इस तरह अतुल्यकालिक परिदृश्यों से निपटने में आम तरीका है, एक कॉलबैक फ़ंक्शन का उपयोग करने के लिए है

detect('image.png', function(result){ 
    alert(result); 
});