ตรวจจับเมื่อหน้าต่างถูกปรับขนาดโดยใช้ JavaScript?

มีวิธีใดบ้างที่ jQuery หรือ JavaScript จะเรียกใช้ฟังก์ชันเมื่อผู้ใช้สิ้นสุดการปรับขนาดหน้าต่างเบราว์เซอร์

ในแง่อื่น ๆ :

1. ฉันสามารถตรวจจับเหตุการณ์การเลื่อนเมาส์เมื่อผู้ใช้ปรับขนาดหน้าต่างเบราว์เซอร์ได้หรือไม่? มิฉะนั้น:
2. ฉันจะตรวจจับได้หรือไม่เมื่อการดำเนินการปรับขนาดหน้าต่างเสร็จสิ้น

ขณะนี้ฉันสามารถทริกเกอร์เหตุการณ์ได้เฉพาะเมื่อผู้ใช้เริ่มปรับขนาดหน้าต่างด้วย jQuery

คุณสามารถใช้.resize()เพื่อรับทุกครั้งที่ความกว้าง / ความสูงเปลี่ยนไปเช่นนี้

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

คุณสามารถดูการสาธิตการทำงานได้ที่นี่โดยจะใช้ค่าความสูง / ความกว้างใหม่และอัปเดตในหน้าเพื่อให้คุณเห็น จำไว้ว่าเหตุการณ์ไม่ได้เริ่มต้นหรือจบลงจริงๆมันแค่ "เกิดขึ้น" เมื่อมีการปรับขนาดเกิดขึ้น ... ไม่มีอะไรจะบอกว่าเหตุการณ์อื่นจะไม่เกิดขึ้น

แก้ไข:ตามความคิดเห็นดูเหมือนว่าคุณต้องการบางอย่างเช่นเหตุการณ์ "on-end" โซลูชันที่คุณพบจะทำสิ่งนี้โดยมีข้อยกเว้นบางประการ (คุณไม่สามารถแยกความแตกต่างระหว่างการเลื่อนเมาส์ขึ้นและการหยุดชั่วคราวด้วยวิธีข้ามเบราว์เซอร์ เหมือนกันสำหรับการสิ้นสุดเทียบกับการหยุดชั่วคราว ) คุณสามารถสร้างเหตุการณ์นั้นเพื่อให้สะอาดขึ้นเล็กน้อยเช่นนี้:

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

คุณอาจมีไฟล์นี้เป็นไฟล์ฐานที่ไหนก็ได้ที่คุณต้องการทำ ... จากนั้นคุณสามารถเชื่อมโยงกับresizeEndเหตุการณ์ใหม่ที่คุณกำลังเรียกใช้ดังนี้:

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

คุณสามารถดูการสาธิตการทำงานของวิธีการนี้ที่นี่

สิ่งนี้สามารถทำได้ด้วยคุณสมบัติonresizeของอินเทอร์เฟซ GlobalEventHandlers ใน JavaScript โดยการกำหนดฟังก์ชันให้กับคุณสมบัติonresizeดังนี้:

window.onresize = functionRef;

ข้อมูลโค้ดต่อไปนี้แสดงให้เห็นถึงสิ่งนี้โดยคอนโซลบันทึก innerWidth และ innerHeight ของหน้าต่างทุกครั้งที่มีการปรับขนาด (เหตุการณ์การปรับขนาดเริ่มทำงานหลังจากปรับขนาดหน้าต่างแล้ว)

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>

อีกวิธีหนึ่งในการทำเช่นนี้โดยใช้ JavaScript เท่านั้นคือ:

window.addEventListener('resize', functionName);

สิ่งนี้จะเริ่มทำงานทุกครั้งที่ขนาดเปลี่ยนไปเช่นเดียวกับคำตอบอื่น ๆ

functionName คือชื่อของฟังก์ชันที่เรียกใช้งานเมื่อมีการปรับขนาดหน้าต่าง (ไม่จำเป็นต้องใช้วงเล็บต่อท้าย)

หากคุณต้องการตรวจสอบเฉพาะเมื่อการเลื่อนสิ้นสุดลงใน Vanilla JS คุณสามารถหาวิธีแก้ปัญหาดังนี้:

ซุปเปอร์กะทัดรัด

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

การผสมผสานที่เป็นไปได้ทั้งหมด 3 แบบด้วยกัน (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') 
}