जावास्क्रिप्ट का आकार परिवर्तन घटना कई बार फायरिंग करते हुए खींचकर आकार संभाल

Question

मुझे उम्मीद थी इस jQuery प्लग में काम करेगा, लेकिन उसने ऐसा नहीं किया:

http://andowebsit.es/blog/noteslog.com/post/how-to-fix-the-resize-event-in-ie (पुराने लिंक noteslog.com/post/how-to था -फिक्स-द-रीसाइज-इवेंट-इन-यानी)।

मैंने अपनी साइट पर एक टिप्पणी जोड़ा, लेकिन वे नियंत्रित हैं, इसलिए आप इसे अभी तक नहीं देख पाएंगे।

लेकिन किसी भी तरह, मुझे अपनी इच्छा समझाएं। मैं एक "आकार बदलना" घटना को निकालना चाहता हूं जब उपयोगकर्ता या तो उसका आकार बदलता है, और/या उसका आकार बदलता है, नहीं जबकि उपयोगकर्ता सक्रिय रूप से ब्राउज़र की विंडो आकार बदलने वाले हैंडल को खींच रहा है। मेरे पास काफी जटिल और समय लेने वाला ऑनरिजइज हैडल फ़ंक्शन मुझे चलाने की आवश्यकता है, लेकिन 100 बार नहीं चला क्योंकि उपयोगकर्ता ने खिड़की को 100px तक बढ़ाया और घटना को कभी भी पिक्सेल आंदोलन के लिए निकाल दिया गया। मुझे लगता है कि उपयोगकर्ता ने आकार बदलने के बाद इसे संभालने के लिए सबसे अच्छा शर्त संभालना होगा।

Answer 1

ब्राउज़र से आने वाली घटनाओं की बाढ़ को प्रबंधित करने के लिए समवर्ती समाधानों से कुछ विचार उधार लें।

उदाहरण के लिए, जब आप पहली बार आकार बदलते हैं, तो एक झंडा सेट करें जो इंगित करता है कि उपयोगकर्ता वर्तमान में आकार बदल रहा है। 1 सेकंड के बाद वास्तविक आकार बदलें हैंडलर को कॉल करने के लिए टाइमआउट सेट करें। फिर, जब भी यह ध्वज सत्य है, आकार बदलने की घटना को अनदेखा करें। फिर, वास्तविक हैंडलर में, एक बार सबकुछ किया जाता है और सही हो जाता है, ध्वज को झूठी पर सेट करें।

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

यह आपके लिए उपयुक्त नहीं हो सकता है, लेकिन ताले का उपयोग करने के कई अन्य तरीके हैं जो अधिक उपयोगी हो सकते हैं।

Answer 2

उपयोगकर्ता द्वारा आकार बदलने के लिए टाइमआउट सेट करने के बारे में कैसे? आकार बदलने पर टाइमआउट रीसेट करें, या टाइमआउट की समयसीमा समाप्त होने पर आकार बदलें हैंडलर को आग लगाना।

Answer 3

चूंकि यह jQuery में बनाया गया है, तो क्या आप एक्सटेंशन पर किसी भी प्रकार की पूर्ण घटना को बाध्य नहीं कर सकते हैं और इसे फ़ंक्शन पास करते समय निष्पादित किया जाना चाहिए?

संपादित करें:

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

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

Answer 4

इस तरह की कुछ कोड के बारे में कैसे:

function resizeStuff() { 
//Time consuming resize stuff here 
} 
var TO = false; 
$(window).resize(function(){ 
if(TO !== false) 
    clearTimeout(TO); 
TO = setTimeout(resizeStuff, 200); //200 is time in miliseconds 
}); 

यकीन है कि समारोह केवल आकार बदलता है जब उपयोगकर्ता का आकार बदलने के बंद हो जाता है बनाने चाहिए।

Answer 5

पॉल आयरिश एक महान Debounced jQuery plugin है जो इस समस्या को हल करता है।

Answer 6

मैंने कुछ दिन पहले डिफ़ॉल्ट jQuery on -वेंट-हैंडलर बढ़ाया था। यदि किसी दिए गए अंतराल के लिए ईवेंट ट्रिगर नहीं किया गया है तो यह चयनित तत्वों में एक या अधिक घटनाओं के लिए इवेंट हैंडलर फ़ंक्शन संलग्न करता है। यह उपयोगी है अगर आप विलंब के बाद ही कॉलबैक को आग लगाना चाहते हैं, जैसे आकार बदलने की घटना, या अन्यथा। https://github.com/yckart/jquery.unevent.js

;(function ($) { 
    var methods = { on: $.fn.on, bind: $.fn.bind }; 
    $.each(methods, function(k){ 
     $.fn[k] = function() { 
      var args = [].slice.call(arguments), 
       delay = args.pop(), 
       fn = args.pop(), 
       timer; 

      args.push(function() { 
       var self = this, 
        arg = arguments; 
       clearTimeout(timer); 
       timer = setTimeout(function(){ 
        fn.apply(self, [].slice.call(arg)); 
       }, delay); 
      }); 

      return methods[k].apply(this, isNaN(delay) ? arguments : args); 
     }; 
    }); 
}(jQuery)); 

किसी अन्य on या bind -event हैंडलर है जैसे कि यह प्रयोग करें, सिवाय इसके कि आप पिछले के रूप में एक अतिरिक्त पैरामीटर पारित कर सकते हैं: आप पुस्तकालयों में हैं

$(window).on('resize', function(e) { 
    console.log(e.type + '-event was 200ms not triggered'); 
}, 200); 

http://jsfiddle.net/ARTsinn/EqqHx/

Answer 7

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

यहाँ कैसे अंडरस्कोर debouncer काम करता है की एक उदाहरण है:

// declare Listener function 
var debouncerListener = _.debounce(function(e) { 

    // all the actions you need to happen when this event fires 

}, 300); // the amount of milliseconds that you want to wait before this function is called again 

तो बस खिड़की

window.addEventListener("resize", debouncerListener, false); 

चेकआउट सभी अंडरस्कोर कार्यों उपलब्ध यहाँ http://underscorejs.org/

का आकार बदलने पर कि debouncer फ़ंक्शन को कॉल करें