बल पर जावास्क्रिप्ट के साथ डीओएम रीड्रा

Question

प्रश्न का शीर्षक मुझे बताता है कि मेरे विशेष मामले के पीछे क्या अंतिम सवाल है।

मेरा मामला: एक क्लिक हैंडलर के अंदर, मैं एक व्यस्त कार्य शुरू होने से ठीक पहले एक छवि दृश्यमान (एक 'लोडिंग' एनीमेशन) बनाना चाहता हूं। फिर मैं समारोह पूरा होने के बाद इसे फिर से अदृश्य बनाना चाहता हूं। मुझे उम्मीद की बजाय मुझे एहसास हुआ कि छवि कभी दिखाई नहीं दे रही है। मुझे लगता है कि यह ब्राउज़र के कारण हैंडलर को समाप्त करने की प्रतीक्षा कर रहा है, इससे पहले कि यह कोई भी रेड्रॉइंग कर सके (मुझे यकीन है कि उसके लिए अच्छे प्रदर्शन कारण हैं)।

कोड (भी इस बेला में: http://jsfiddle.net/JLmh4/2/)

एचटीएमएल:

<img id="kitty" src="http://placekitten.com/50/50" style="display:none"> 
<div><a href="#" id="enlace">click to see the cat</a> </div> 

js:

$(document).ready(function(){ 
    $('#enlace').click(function(){ 
     var kitty = $('#kitty'); 
     kitty.css('display','block'); 

     // see: http://unixpapa.com/js/sleep.html 
     function sleepStupidly(usec) 
     { 
      var endtime= new Date().getTime() + usec; 
      while (new Date().getTime() < endtime) 
       ; 
     } 

     // simulates bussy proccess, calling some function... 

     sleepStupidly(4000); 

     // when this triggers the img style do refresh! 
     // but not before 
     alert('now you do see it'); 

     kitty.css('display','none'); 
    }); 
}); 

मैं sleepStupidly समारोह है कि दिखाने के लिए सही होने के बाद alert कॉल जोड़ लिया है बाकी के पल में, ब्राउज़र फिर से चलाता है, लेकिन पहले नहीं। मुझे 'डिस्प्ले' को 'ब्लॉक' पर सेट करने के बाद सही ढंग से फिर से निकालने की उम्मीद थी;

रिकॉर्ड के लिए, मैंने इस कोड में दिखाए गए और छिपाने वाली छवि के बजाय HTML टैग, या सीएसएस कक्षाओं को स्वैप करने का भी प्रयास किया है। वही परिणाम

मेरे सभी शोध के बाद मुझे लगता है कि मुझे क्या चाहिए, ब्राउज़र को को फिर से निकालने के लिए मजबूर करने की क्षमता है और तब तक हर दूसरी चीज़ को रोकें।

क्या यह संभव है? क्या यह एक क्रॉसब्रोसर तरीके से संभव है? कुछ प्लगइन मैं शायद खोजने में सक्षम नहीं था ...?

मैंने सोचा कि शायद 'jquery css callback' जैसे कुछ (जैसा कि इस प्रश्न में: In JQuery, Is it possible to get callback function after setting new css rule?) चाल करेगा ... लेकिन यह अस्तित्व में नहीं है।

मैंने एक ही घटना के लिए अलग-अलग हैंडलर में दिखाए जाने, फ़ंक्शन कॉल और छिपाने की भी कोशिश की है ... लेकिन कुछ भी नहीं। फ़ंक्शन के निष्पादन में देरी के लिए setTimeout भी जोड़ना (जैसा कि यहां अनुशंसित है: Force DOM refresh in JavaScript)।

धन्यवाद और मुझे आशा है कि यह दूसरों की भी मदद करेगी।

Javier

संपादित करें (मेरे पसंदीदा जवाब सेट करने के बाद):

बस आगे समझाने के लिए कारण है कि मैं window.setTimeout रणनीति का चयन किया। मेरे वास्तविक उपयोग मामले में मुझे एहसास हुआ है कि पृष्ठ को फिर से निकालने के लिए पर्याप्त समय देने के लिए, मुझे इसे लगभग 1000 मिलीसेकंड (बेवकूफ उदाहरण के लिए 50 से अधिक) देना था। यह मेरा मानना ​​है कि एक गहरे डोम पेड़ (वास्तव में, अनावश्यक रूप से गहरा) के कारण है। सेटटाइमआउट दृष्टिकोण आपको ऐसा करने देता है।

Answer 1

कुछ कम unnoticeable देरी के साथ प्रयोग करें window.setTimeout() धीमी गति से समारोह को चलाने के लिए:

$(document).ready(function() { 
    $('#enlace').click(function() { 
     showImage(); 

     window.setTimeout(function() { 
      sleepStupidly(4000); 
      alert('now you do see it'); 
      hideImage(); 
     }, 50); 
    }); 
}); 

Live demo

Answer 2

JQuery show और hide कॉलबैक (या fadeIn/fadeOut जैसे कुछ प्रदर्शित करने के लिए अन्य तरीका) का उपयोग करें।

http://jsfiddle.net/JLmh4/3/

$(document).ready(function() { 
    $('#enlace').click(function() { 
     var kitty = $('#kitty'); 


     // see: http://unixpapa.com/js/sleep.html 
     function sleepStupidly(usec) { 
      var endtime = new Date().getTime() + usec; 
      while (new Date().getTime() < endtime); 
     } 

     kitty.show(function() { 

      // simulates bussy proccess, calling some function... 
      sleepStupidly(4000); 

      // when this triggers the img style do refresh! 
      // but not before 
      alert('now you do see it'); 

      kitty.hide(); 
     }); 
    }); 
}); 

Answer 3

मैं अगर यह आपके मामले में काम करता है (के रूप में मेरे पास है पता नहीं है इसका परीक्षण नहीं किया गया), लेकिन जब जावास्क्रिप्ट/jQuery के साथ सीएसएस में हेरफेर करना कभी-कभी किसी विशिष्ट तत्व को फिर से बनाने के लिए मजबूर करना आवश्यक होता है परिवर्तन प्रभावी होते हैं।

यह केवल सीएसएस संपत्ति का अनुरोध करके किया जाता है।

आपके मामले में, मैं setTimeout के साथ गड़बड़ करने से पहले फ़ंक्शन कॉल से पहले kitty.position().left; डालने का प्रयास करूंगा।

Answer 4

रेड्रो को मजबूर करने के लिए, आप ऑफ़सेट हाइट या getComputedStyle() प्राप्त कर सकते हैं।

var foo = window.getComputedStyle(el, null); 

या

var bar = el.offsetHeight; 

"एल" निम्नलिखित स्थापित कर रही है कि DOM तत्व

Answer 5

क्या मेरे लिए काम किया जा रहा है:

$(element).css('display','none'); 

उसके बाद आप जो चाहे कर सकते हैं , और अंततः आप करना चाहते हैं:

$(element).css('display','block');