Phát hiện khi một cửa sổ được thay đổi kích thước bằng JavaScript?

Có cách nào với jQuery hoặc JavaScript để kích hoạt chức năng khi người dùng kết thúc thay đổi kích thước cửa sổ trình duyệt không?

Nói cách khác:

1. Tôi có thể phát hiện sự kiện chuột lên khi người dùng thay đổi kích thước cửa sổ trình duyệt không? Nếu không thì:
2. Tôi có thể phát hiện khi hoạt động thay đổi kích thước cửa sổ kết thúc không?

Tôi hiện chỉ có thể kích hoạt một sự kiện khi người dùng bắt đầu thay đổi kích thước cửa sổ bằng jQuery

Bạn có thể sử dụng .resize()để có được mỗi khi chiều rộng / chiều cao thực sự thay đổi, như thế này:

$(window).resize(function() {
  //resize just happened, pixels changed
});

Bạn có thể xem một bản demo hoạt động ở đây , nó lấy các giá trị chiều cao / chiều rộng mới và cập nhật chúng trong trang để bạn xem. Hãy nhớ rằng sự kiện không thực sự bắt đầu hay kết thúc , nó chỉ "xảy ra" khi thay đổi kích thước xảy ra ... không có gì để nói một sự kiện khác sẽ không xảy ra.

Chỉnh sửa: Theo nhận xét, có vẻ như bạn muốn một cái gì đó giống như một sự kiện "kết thúc", giải pháp bạn tìm thấy thực hiện điều này, với một vài ngoại lệ (bạn không thể phân biệt giữa chuột lên và tạm dừng theo cách đa trình duyệt, tương tự cho một kết thúc so với tạm dừng ). Bạn có thể tạo sự kiện đó, để làm cho nó sạch hơn một chút, như thế này:

$(window).resize(function() {
    if(this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function() {
        $(this).trigger('resizeEnd');
    }, 500);
});

Bạn có thể có đây là một tệp cơ sở ở đâu đó, bất cứ điều gì bạn muốn làm ... sau đó bạn có thể liên kết với resizeEndsự kiện mới mà bạn đang kích hoạt, như thế này:

$(window).bind('resizeEnd', function() {
    //do something, window hasn't changed size in 500ms
});

Bạn có thể thấy một bản demo làm việc của phương pháp này ở đây

Điều này có thể đạt được với thuộc tính onresize của giao diện GlobalEventHandlers trong JavaScript, bằng cách gán một hàm cho thuộc tính onresize , như vậy:

window.onresize = functionRef;

Đoạn mã sau đây thể hiện điều này, bằng cách bảng điều khiển ghi nhật ký InternalWidth và InternalHeight của cửa sổ bất cứ khi nào nó thay đổi kích thước. (Sự kiện thay đổi kích thước kích hoạt sau khi cửa sổ đã được thay đổi kích thước)

function resize() {
  console.log("height: ", window.innerHeight, "px");
  console.log("width: ", window.innerWidth, "px");
}

window.onresize = resize;

<p>In order for this code snippet to work as intended, you will need to either shrink your browser window down to the size of this code snippet, or fullscreen this code snippet and resize from there.</p>

Một cách khác để làm điều này, chỉ sử dụng JavaScript, sẽ là:

window.addEventListener('resize', functionName);

Điều này kích hoạt mỗi khi kích thước thay đổi, giống như câu trả lời khác.

functionName là tên của hàm được thực thi khi cửa sổ được thay đổi kích thước (dấu ngoặc ở cuối không cần thiết).

Nếu bạn chỉ muốn kiểm tra khi cuộn kết thúc, trong Vanilla JS, Bạn có thể đưa ra một giải pháp như thế này:

Siêu siêu nhỏ gọn

var t
window.onresize = () => { clearTimeout(t) t = setTimeout(() => { resEnded() }, 500) }
function resEnded() { console.log('ended') }

Tất cả 3 kết hợp có thể với nhau (ES6)

var t
window.onresize = () => {
    resizing(this, this.innerWidth, this.innerHeight) //1
    if (typeof t == 'undefined') resStarted() //2
    clearTimeout(t); t = setTimeout(() => { t = undefined; resEnded() }, 500) //3
}

function resizing(target, w, h) {
    console.log(`Youre resizing: width ${w} height ${h}`)
}    
function resStarted() { 
    console.log('Resize Started') 
}
function resEnded() { 
    console.log('Resize Ended') 
}