Sự kiện kích hoạt bằng cách sử dụng Jquery khi thay đổi CSS?

Question

Tôi tò mò là có một người nghe sự kiện hoặc có lẽ là một cách để xây dựng một phương pháp sẽ kích hoạt khi thay đổi CSS xảy ra?

Biểu định kiểu của tôi sử dụng truy vấn phương tiện và tôi muốn biết liệu có cách nào để đính kèm người nghe để xem khi nào các truy vấn phương tiện đó bắt đầu vào và ra. Ví dụ: Tôi có truy vấn phương tiện ẩn một nút ở độ rộng màn hình nhất định

@media screen and (max-width: 480px) { 
    #search-button { 
    display: none; 
    } 
} 

Tôi sẽ sử dụng trình xử lý sự kiện nào để phát hiện khi màn hình đó thay đổi? Tôi hiện đang làm điều này:

$(window).resize(function() { 
    if($('#search-button').css("display") == "none") { 
    //do something 
    } else { 
    //do something else 
    } 
}); 

Làm việc tốt, nhưng nó gọi người nghe mỗi lần người dùng thay đổi màn hình và tôi chỉ muốn kích hoạt khi nút của nút thay đổi. Tôi hy vọng điều đó đúng.

ví dụ này là những gì tôi muốn

$('#search-button').cssEventListenerOfSomeKind(function() { 
    alert('the display changed'); 
}); 

Answer 1

Ràng buộc với window.resize là lựa chọn tốt nhất của bạn (Tôi tin). Không có bất kỳ sự kiện nào được kích hoạt khi bạn thay đổi CSS của phần tử. Tuy nhiên bạn có thể tối ưu hóa một chút bằng cách cache chọn sử dụng:

var $searcButton = $('#search-button'); 
$(window).resize(function() { 
    if($searcButton.css("display") == "none") { 
     //do something 
    } else { 
     //do something else 
    } 
}); 

Hoặc bạn có thể sử dụng $(window).width() để kiểm tra độ rộng của khung nhìn:

var $window = $(window); 
$window.resize(function() { 
    if($window.width() <= 480) { 
     //do something 
    } else { 
     //do something else 
    } 
}); 

CẬP NHẬT

Bạn luôn có thể tăng tốc trình xử lý sự kiện của riêng bạn:

var $window = $(window), 
    resize_ok = true, 
    timer; 

timer = setInterval(function() { 
    resize_ok = true; 
}, 250); 

$window.resize(function() { 
    if (resize_ok === true) { 
     resize_ok = false; 
     if($window.width() <= 480) { 
      //do something 
     } else { 
      //do something else 
     } 
    } 
}); 

Điều này sẽ ngăn mã trong trình xử lý sự kiện resize của bạn hoạt động nhiều hơn một lần mỗi giây.

Answer 2

Nếu nó chỉ là một sự kiện một lần bạn có thể thử để unbind sự kiện này.

http://api.jquery.com/unbind/

Answer 3

Tôi biết điều này là cũ nhưng tôi quản lý để giải quyết nó với logic này

// set width and height of element that is controlled by the media query 
    var page_width = $page.width(); 
    var page_height = $page.height(); 


    $window = $(window).resize(function(){ 
     if($page.width() != page_width) { 
      // update page_width and height so it only executes your 
      // function when a change occurs 
      page_width = $page.width(); 
      page_height = $page.height(); 
      // do something 
      // ... 
     } 
    });