फ़ंक्शन निष्पादित करते समय जावास्क्रिप्ट लोडर छवि दिखाएं

Question

मैं एक बटन क्लिक करना चाहता हूं, लोडर छवि दिखा सकता हूं, समय लेने वाली फ़ंक्शन निष्पादित कर सकता हूं, लोडर छवि को छुपा सकता हूं। जब मैं इसका प्रयास करता हूं, तो पृष्ठ पूरी घटना तक चलता रहता है, इसलिए लोडर छवि कभी नहीं देखी जाती है।

$('#btn').click(function() { 
    $('#LoadingImage').show(); 
    <time consuming function> 
    $('#LoadingImage').hide(); 
}); 

कैसे मुझे साफ तौर लोडर छवि,,, दिखा सकते हैं स्क्रीन अद्यतन समारोह चलाने लोडर छवि को छिपाने:

यहां एक नमूना है?

Answer 1

हालांकि क्या आप चाहिए काम है, ऐसा करने का प्रयास करें:

$('#btn').click(function() { 
    $('#LoadingImage').show(); 
    setTimeout(function() { 
     <time consuming function> 
     $('#LoadingImage').hide(); 
    }, 0); 
}); 

इस घटना की कॉल स्टैक से बच जाएगा।

यदि यह काम नहीं करता है, तो इस रहस्य समय लेने वाले कार्य के बारे में अधिक जानकारी पोस्ट करें।

Answer 2

विभिन्न कारणों से जेएस को मुख्य धागे पर निष्पादित करना है, जिसका अर्थ यह है कि जेएस निष्पादित होने तक चित्रकला अवरुद्ध है - यहां तक ​​कि क्रोम जैसे मल्टीप्रोसेस आर्किटेक्चर भी टैब को पुन: पेश नहीं कर सकते हैं यदि वह टैब जेएस निष्पादित कर रहा है।

पेंटिंग होने का आपका एकमात्र तरीका आपके फ़ंक्शन के निष्पादन को विभाजित करना होगा, या फ़ंक्शन को HTML5 कार्यकर्ता थ्रेड पर ले जाना होगा - और वे केवल फ़ायरफ़ॉक्स और सफारी के बीटा पर काम करते हैं (या अधिक सामान्य रूप से पर्याप्त रूप से हाल ही में वेबकिट का निर्माण उचित)