घटनाक्रम और डोम तत्व

मान लीजिए कि मेरे पास दो कॉलम लेआउट वाला एक पृष्ठ है जहां बाएं कॉलम लिंक का एक सेट है और यह लिंक क्लिक होने पर संबंधित कॉलम पृष्ठ/टेम्पलेट को दाएं कॉलम में लोड करता है।घटनाक्रम और डोम तत्व

एक टेम्पलेट लोड हो रहा है पर, वहाँ एक टेम्पलेट हैंडलर कि requirejs के माध्यम से एक सिंगलटन के रूप में प्रारंभ हो जाता है है और यह कुछ तरीकों और तरह संचालकों को परिभाषित करता है:

SomePage.prototype.saveHandler: function(e) { ... }; // Page handler has a handler 

SomePage.prototype.initialize: function() { 
    $('#btnSave').on('click', saveHandler); 
}

फिर, मैं एक इनिशियलाइज़ विधि के माध्यम से डोम घटनाओं संलग्न कर रहा हूँ हर समय पृष्ठ लोड होता है।

SomePage.initialize(); // This attaches the click event

अब, जब मैं दाईं ओर से एक लिंक पर क्लिक करें, एक अलग टेम्पलेट पृष्ठ लोड होता है और इसके बाद के संस्करण की प्रक्रिया उस पृष्ठ के लिए दोहराता है।

मुझे आश्चर्य है कि क्लिक ईवेंट के साथ क्या होता है जो पहले btnSave तत्व से जुड़ा हुआ था? क्या यह अब jQuery कैश में एक खतरनाक घटना हैंडलर है?

यदि मैं उसी पृष्ठ को दोबारा लोड करता हूं तो इसे हटाने का प्रयास करता हूं, क्या यह वास्तव में मूल घटना को हटा देगा?

$('#btnSave').off('click', saveHandler);

क्या निम्न ब्लॉक निष्पादित करने से स्मृति लीक/लटकती संदर्भों को रोकता है?

// The potential problem here is that btnSave is part of the newly loaded template 
// and not the element i attached the handler to earlier (which doesn't exist anymore) 
$('#btnSave').off('click', saveHandler); 

$('#btnSave').on('click', saveHandler);

यह सुनिश्चित करने का सबसे अच्छा तरीका क्या है कि मैं लटकने वाले संदर्भों और मेमोरी लीक के साथ समाप्त नहीं होता हूं। यह सादा जावास्क्रिप्ट के लिए भी एक संभावित सवाल है। मेरी समझ यह है कि टेम्पलेट पेज रीफ्रेश होने पर उपरोक्त काम नहीं करेगा। मैं इस बीच प्रयोग कर रहा हूं, लेकिन यह जानना अच्छा होगा कि विशेषज्ञ इसे कैसे संभालेंगे। धन्यवाद!

स्रोत

2014-09-01 theoutlander

मैं निश्चित रूप से 'ऑफ' और फिर 'ठीक' पर उपयोग करता हूं, जैसा आपने किया था। लेकिन क्या आप टेम्पलेट को फिर से लोड करने से पहले 'off' * को कॉल करने के लिए कोई संभावित तरीका है? – dthree

मैंने उस पैटर्न को समाधान के रूप में सोचा है, लेकिन मुझे यकीन नहीं है कि मुझे इसकी आवश्यकता है क्योंकि jQuery इसे आंतरिक रूप से संभाला जा सकता है।यदि प्रत्येक पृष्ठ ने एक इंटरफेस लागू किया है और वर्तमान पृष्ठ के रूप में खुद को लोड करने पर, तो एक वैश्विक लिंक हैंडलर app.cache.currentPage.cleanup() जैसे कुछ कर सकता है जिसमें सभी बंद हो सकते हैं। – theoutlander

मुझे लगता है कि आप सही हैं कि यह ऐसा करने से भूत तत्व बनाता है ... – dthree

जब आप नया tmpl लोड करते हैं तो आपको केवल इसके लिए ईवेंट संलग्न करना होगा। उदाहरण के लिए:।।

$ ("# btnSave", $ (newly_tmpl)) पर ("क्लिक", .....

स्रोत

2014-09-03 04:38:16 cbertelegni

एंडी उस्मानी से इस स्लाइड एक जावास्क्रिप्ट गुरु पर एक नज़र डालें आप होगा स्मृति रिसाव और वृत्तीय संदर्भ के बारे में यहाँ उत्तर नहीं मिलता: https://speakerdeck.com/addyosmani/javascript-memory-management-masterclass

स्रोत

2014-09-03 06:40:14 albanx

पोस्ट करने के लिए धन्यवाद। यह भी खूब रही! मैं क्रोम डीबगर में मेमोरी टूल्स से परिचित हूं। इन दिनों में से एक मैं स्मृति प्रोफाइलर के माध्यम से इसे प्रोफाइल करने और रहस्य को उजागर करने के लिए कुछ समय खोजने की कोशिश करूंगा। एक और चीज जो मैं करूँगा वह jQuery स्रोत को देख रही है। मुझे लगता है कि इसके लिए एक आसान फिक्स कार्यक्षमता पेश करना होगा जो घटना को पंजीकृत करते समय एक अद्वितीय पहचानकर्ता को पारित करने की अनुमति देता है और आंतरिक रूप से jQuery मौजूदा हैंडलर को नए से बदल सकता है। – theoutlander

बटन को क्लिक करें घटना संलग्न के बजाय, आप टेम्पलेट लोड के बाद बटन रन-समय पर क्लिक समारोह पर यह संलग्न करना चाहिए की तरह इस

var element = $("<div id='tempDiv' class='main_container o-hidden'><button value='Click' id='btnSave'/></div>"); 

$("#btnSave",element).each(function(){ 
    $(this).attr("onclick","tryMe();"); 
});

। कोशिश करेंगे आपके एम पर क्लिक करें utton, तत्व चर आपकी टेम्पलेट सामग्री से बनाया जाना चाहिए।

स्रोत

2014-09-03 12:08:13 bharatpatel

क्यों बस एक प्रत्यायोजित घटना के लिए इसे और अधिक नहीं है और केवल यह एक बार रजिस्टर:

$(".someParentThatsAlwaysOnPage #btnSave").on("click", function() { 
    var somePage = getMeContextOfProperObject(); 
    somePage.saveHandler(); 
});

इस तरह क्लिक करें घटना केवल एक बार ही है और jQuery डोम परिवर्तन के रूप में श्रोता गुंजाइश अद्यतन करेगा। आपको केवल उचित वस्तु प्राप्त करने का साधन प्रदान करना होगा। अपने अधिक कोड को देखे बिना मैं आपकी मदद नहीं कर सकता।

स्रोत

2014-09-07 03:15:51 bonesbrigade

धन्यवाद! बचाओ सिर्फ एक उदाहरण है। अधिकांश पृष्ठों में उनकी सामग्री के आधार पर अलग-अलग ईवेंट श्रोताओं होंगे। आपका सुझाव अच्छा है, लेकिन यह तभी काम करता है जब प्रत्येक पृष्ठ एक इंटरफ़ेस लागू हो। हालांकि, यह इस मामले में व्यवहार्य नहीं है क्योंकि पृष्ठों में कार्यक्षमता के प्रकार को सहेजने/रद्द करने के पीछे एक आम संप्रदाय नहीं है। – theoutlander

घटनाक्रम और डोम तत्व

उत्तर

संबंधित मुद्दे