[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/