Tập lệnh bạn thấy quá phức tạp. Những điều sau đây đã làm việc cho tôi:
$(function(){
// Cache reference to our container
var $container = $("#container");
// A function for updating max-height
function updateMaxHeight() {
$container.css("max-height", $(this).height() - 100);
}
// Call updateMaxHeight when browser resize event fires
$(window).on("resize", updateMaxHeight);
});
Một cảnh báo là sự kiện thay đổi kích cỡ được gọi nhiều khi thay đổi kích thước trình duyệt; nó không chỉ được gọi sau khi trình duyệt đã được thay đổi kích cỡ. Kết quả là, bạn có thể có chức năng gọi lại được gọi là hàng trăm lần - đây thường là một ý tưởng tồi.
Giải pháp sẽ là tăng tốc hoặc hủy bỏ sự kiện. Throttling có nghĩa là bạn sẽ không cho phép gọi lại được bắn hơn x lần trong một khoảng thời gian (có thể 5 lần một giây). Debouncing có nghĩa là bạn kích hoạt cuộc gọi lại sau một khoảng thời gian nhất định đã trôi qua từ sự kiện thay đổi kích thước cuối cùng (đợi đến 500 mili giây sau một sự kiện thay đổi kích cỡ).
jQuery hiện không hỗ trợ tùy chọn ga hoặc gỡ lỗi, mặc dù có plugin. Other popular libraries you may have used do have these features, chẳng hạn như gạch:
$(function(){
// Cache reference to our container
var $container = $("#container");
// A function for updating max-height
function updateMaxHeight() {
$container.css("max-height", $(this).height() - 100);
}
// Version of updateMaxHeight that will run no more than once every 200ms
var updateMaxHeightThrottled = _.throttle(updateMaxHeight, 200);
// Call updateMaxHeightThrottled when browser resize event fires
$(window).on("resize", updateMaxHeightThrottled);
});