jQuery - Phát hiện thay đổi chiều rộng cửa sổ nhưng không thay đổi chiều cao

Question

Tôi đang sử dụng chức năng .resize() để phát hiện các sự kiện kích thước cửa sổ, nhưng điều này phát hiện cả thay đổi chiều cao và chiều rộng.

Có cách nào để phát hiện chỉ thay đổi chiều rộng chứ không phải thay đổi chiều cao?

Answer 1

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

Answer 2

bạn có thể phát hiện cả hai sự kiện và chỉ cần thực thi mã khi đó là một sự thay đổi width:

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

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

Và bạn có thể muốn kiểm tra kiện debouncing.

Việc ghi nợ thực thi một hàm không được gọi lại cho đến khi một khoảng thời gian nhất định trôi qua mà không được gọi. . Như trong "thực hiện chức năng này chỉ khi 100 mili giây đã trôi qua mà không có nó được gọi

Read more:

---

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

Answer 3

Người ta cũng có thể sử dụng jQuery plugin nhỏ cho việc này: https://github.com/adjohnson916/jquery-resize-dimension

Giữ mã riêng của bạn dễ đọc hơn:

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

hoặc chỉ:

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

Answer 4

Mặc dù đã có một vài của các câu trả lời với các giải pháp làm việc, loại nhiệm vụ này là hiệu năng quan trọng (sự kiện thay đổi kích thước cửa sổ được kích hoạt nhiều lần trong khi người dùng đang thay đổi kích thước cửa sổ) vì vậy tôi đề nghị bạn chăm sóc rformance. Xin vui lòng, có một cái nhìn vào mã tối ưu hóa dưới đây:

/* 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; 
    } 
}); 

Thêm vào đó, bạn có thể quan tâm kiểm tra Debounce/Throttle mẫu - họ cải thiện hiệu suất vô cùng trong những trường hợp như thế này.