jQuery - एक विंडो चौड़ाई परिवर्तन का पता लगाएं लेकिन ऊंचाई परिवर्तन नहीं

Question

मैं विंडो पुन: आकार की घटनाओं का पता लगाने के लिए .resize() फ़ंक्शन का उपयोग कर रहा हूं, लेकिन यह ऊंचाई और चौड़ाई दोनों परिवर्तनों का पता लगाता है।

का पता लगाने का कोई तरीका है बस एक चौड़ाई परिवर्तन और ऊंचाई परिवर्तन नहीं है?

Answer 1

var width = $(window).width(); 
$(window).on('resize', function(){ 
    if($(this).width() != width){ 
     width = $(this).width(); 
     console.log(width); 
    } 
}); 

Answer 2

तुम दोनों घटनाओं का पता लगाने और जब यह एक चौड़ाई परिवर्तन है सिर्फ कोड निष्पादित करें:

var lastWidth = $(window).width(); 

$(window).resize(function(){ 
    if($(window).width()!=lastWidth){ 
     //execute code here. 
     lastWidth = $(window).width(); 
    } 
})   

और तुम घटना debouncing जांच करना चाह सकते।

बहस लागू करता है कि एक फ़ंक्शन को तब तक नहीं बुलाया जाता जब तक कि इसे बिना किसी कॉल के पास किया जाता है। । के रूप में "इस समारोह को केवल तभी 100 मिलीसेकंड के बिना यह कहा जा रहा है बीत चुके हैं पर अमल

और अधिक पढ़ें:

---

• https://css-tricks.com/the-difference-between-throttling-and-debouncing/
• https://davidwalsh.name/javascript-debounce-function

Answer 3

एक भी इस बात के लिए इस छोटे से jQuery प्लगइन का उपयोग कर सकते हैं:

ResizeDimension.bind('width'); 
$(window).on('resize-width', function() { 
    console.log('resize-width event'); 
}); 

या बस: https://github.com/adjohnson916/jquery-resize-dimension

अपने खुद के कोड अधिक पठनीय रहता

$(window).resizeDimension('width', function() { 
    console.log('resize-width event'); 
}); 

Answer 4

वहाँ पहले से ही एक जोड़े हैं भले ही कामकाजी समाधानों के उत्तर के साथ, इस तरह का कार्य महत्वपूर्ण है (खिड़की का आकार बदलना घटना कई बार ट्रिगर होती है जबकि उपयोगकर्ता खिड़की का आकार बदल रहा है) इसलिए मैं दृढ़ता से सुझाव देता हूं कि आप पे का ख्याल रखें rformance। कृपया नीचे दिए गए अनुकूलित कोड पर एक नजर है:

/* Do not waste time by creating jQuery object from window multiple times. 
* Do it just once and store it in a variable. */ 
var $window = $(window); 
var lastWindowWidth = $window.width(); 

$window.resize(function() { 
    /* Do not calculate the new window width twice. 
    * Do it just once and store it in a variable. */ 
    var windowWidth = $window.width(); 

    /* Use !== operator instead of !=. */ 
    if (lastWindowWidth !== windowWidth) { 
     // EXECUTE YOUR CODE HERE 
     lastWindowWidth = windowWidth; 
    } 
}); 

इसके अलावा, आप Debounce/Throttle पैटर्न की जाँच में रुचि हो सकती है - वे इस तरह के मामलों में काफी प्रदर्शन में सुधार।