Your cart is currently empty!
[jQuery] สั่ง JS ให้ทำงานตอน resize หน้าจอแบบไม่ทำร้ายบราวเซอร์
ปกติถ้าเราต้องการให้ Javascript บางฟังก์ชั่นทำงานตอนที่มีการย่อ / ขยายหน้าจอ (ผมจะใช้กับพวก Javascript ในการคุม Position, ขนาดต่าง ๆ ของ Element ที่ต้องคำนวณใหม่เมื่อหน้าจอเปลี่ยนขนาด)
ทีนี้แต่ละบราวเซอร์จะมีความถี่ในการยิงฟังก์ชั่นเหล่านี้ไม่เท่ากันครับ เช่น
- IE, Safari, Chrome ยิงทุกเสี้ยววินาทีที่กำลังย่อจออยู่ กล่าวคือถ้าเราลากย่อจอค้างไว้ ฟังก์ชั่นนั้นก็จะทำงานเรื่อย ๆ
- Opera จะทำให้ฟังก์ชั่นนั้นทำงาน แต่ไม่เรนเดอร์จนกว่าจะย่อจอเสร็จ
- Firefox จะรันฟังก์ชั่นนั้นครั้งเดียวตอนย่อจอเสร็จ
จะเห็นว่าเคสของ IE, Safari, Chrome เป็นเคสที่น่าห่วงมาก เพราะตอนย่อจากไปเรื่อย ๆ JS ก็จะยิงรัว ๆ ไปเรื่อย ๆ หนักบราวเซอร์สุด ๆ หรือถ้าเครื่องไม่แรงอาจจะค้างไปได้เลย
จึงเกิดคอนเซปต์การ debounce Javascript ขึ้น เป็นการบังคับให้ JS ทำงานทุก ๆ 100 เสี้ยววินาทีแทนครับ ทำแบบนี้จะจำกัดไม่ให้ JS ทำงานเยอะเกินไปได้ ซึ่งสามารถใช้โค้ดด้านล่างนี้ได้เลยครับ
(function($,sr){ // debouncing function from John Hann // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/ var debounce = function (func, threshold, execAsap) { var timeout; return function debounced () { var obj = this, args = arguments; function delayed () { if (!execAsap) func.apply(obj, args); timeout = null; }; if (timeout) clearTimeout(timeout); else if (execAsap) func.apply(obj, args); timeout = setTimeout(delayed, threshold || 100); }; } // smartresize jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); }; })(jQuery,'smartresize'); // usage: $(window).smartresize(function(){ // code that takes it easy... });
วิธีการใช้ คือ ใส่โค้ด JS ที่ต้องการรันตอน resize หน้าจอเข้าไปใต้บรรทัด // code that takes it easy… เพียงเท่านี้มันก็จะ Debounce ให้อัตโนมัติครับ
ที่มา: http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/
by
Tags:
Comments
2 responses to “[jQuery] สั่ง JS ให้ทำงานตอน resize หน้าจอแบบไม่ทำร้ายบราวเซอร์”
เป็นประโยชน์ค่ะ
เยี่ยมมากๆครับ
Leave a Reply