Javascript : Ajax Feeds ด้วย Timer (setTimeout vs setInterval) อันไหนดีกว่ากัน

ตั้งแต่ Facebook,Twitter เข้ามามีอิทธิพลกับวงการเว็บ
เราจะสังเกตุได้ว่า Facebook,Twitter มักจะมี พวก Feeds ข้อมูลอัปเดตอยู่ตลอดเวลา

แน่นอนคงหนีไม่พ้นที่จะต้องใช้ function เกี่ยวกับพวก "Timer"

แล้ว Timer ใน Javascript มีอะไรบ้าง ??  มาดูกันเลย




เท่าที่เห็นจะมีอยู่ 2 ตัว คือ setTimeout() กับ setInterval()

<script>

setTimeout ( function() { ... } , 1000 ) // คือ อีก 1 วินาที ให้ Run Function ที่อยู่ในวงเล็บ (Run ครั้งเดียว)
setInterval( function() { ... } , 1000 ) // คือ ทุกๆ 1 วินาที ให้ Run Function ที่อยู่ในวงเล็บ (Run ตลอดเวลา)

</script>

ในเมื่อมี Function Timer แล้วก็ต้องมีตัว Stop Timer โดยวิธีการหยุดนั้นมี Tips อยู่เล็กน้อยคือต้องเก็บ ID ของ Timer แต่ละตัว
ตัวอย่าง

<script>

   var TimeoutID = setTimeout ( function() { alert('Hello Timeout') } , 1000 );
   clearTimeout( TimeoutID ); // คือการหยุด Timeout

   var IntervalID = setInterval ( function() { alert('Hello Interval') } , 1000 );
   clearInterval( IntervalID ); // คือการหยุด Interval

</script> 

เมื่อรู้จัก Timer กันแล้ว เรามาเข้าเรื่องวิธีการทำ Ajax Feeds กันเลย (ขออธิบายตาม Style Code-Self นะ ^^)

ตัวอย่าง แบบ setInterval() ก่อนแล้วกัน

<div id="News"></div>
<script>
   
    setInterval(
      function() {
         
         $.ajax({
            url : './NewsFeed.php' , // เรียกไฟล์ที่มีการดึงข้อมูลข่าวใหม่ๆ
            cache : false ,          // ไม่ต้องจำ Cache
            success : function( html ) {
              $(' #News ').prepend( html );  // การนำ String จากการเรียก Ajax มาต่อข้างบนสุด
            }
         });

      } , 10000 // Run ทุกๆ 10 วินาที
    );

</script>

ตัวอย่าง แบบ setTimeout() กันบ้าง

<div id="News"></div>
<script>
   
  function callNewsFeed() {

     $.ajax({
          url : './NewsFeed.php' , // เรียกไฟล์ที่มีการดึงข้อมูลข่าวใหม่ๆ
          cache : false ,          // ไม่ต้องจำ Cache
          success : function( html ) {
             $(' #News ').prepend( html );  // การนำ String จากการเรียก Ajax มาต่อข้างบนสุด

             setTimeout( function() {   callNewsFeed();  } , 10000 ); // Run ทุกๆ 10 วินาที
          }
     });

  }

  callNewsFeed(); // Feeds Start

</script>

จากตัวอย่างจะเห็นได้ว่า setTimeout() นั้นต้องอาศัยการเรียก Function แบบ Recursive
ส่วนตัว setInterval() นั้น ง่ายแสนง่าย ไม่ต้องมาทำ Recursive ให้ปวดหัว (ตอนเรียนมาได้ใช้ตอนนี้แหละ ฮ่าๆ)

แล้วควรใข้แบบไหนหล่ะ ??

ตอบได้เต็มปากเต็มคำว่า แบบ setTimeout() work กว่าครับ
จากประสบการณ์ที่ผ่านมา เคยใช้แบบ setInterval() แล้ว (เห็นมันง่ายดี) ปรากฎว่า Browser ค้างไปเลยครับ

เหตุที่เป็นเช่นนั้นคือ
setInterval() นั้นทำการเรียกทุกๆ 10 วินาที ตามที่เราเรียกไว้ แต่เจ้ากรรมที่ Ajax บางตัวเรายัง Request ไม่เสร็จ จึงทำให้บางทีนั้น Ajax รัน Request พร้อมกันหลายๆ ตัว

ต่างกับ setTimeout() ที่เราทำการเรียก function อีกรอบก็ต่อเมื่อ Ajax Success ดังนั้นการ Run แต่ละครั้งจึงแบบระเบียบกว่า เพราะเราแน่ใจได้ว่าเมื่อ Ajax ตัวแรก Success มันก็จะทำการเรียกครั้งต่อไป
ต่างจากเจ้า setInterval() ซึ่งมันจะไม่สนใจว่า Ajax จะ Request เสร็จหรือไม่ มันก็จะทำงานต่อไปของมันเรื่อยๆ ไม่สนใจอะไรเลย หุหุ

หวังว่าบทความนี้คงเป็นประโยชน์กับใครหลายๆคนนะครับ ^^
** หมายเหตุ Script ที่กล่าวมานั้นเป็นเพียงตัวอย่าง ซึ่งที่จริงแล้วเรามันต้องมีการ ส่งพวก Date Time ในการ Request ด้วย ลองนำไปประยุกต์ใช้กันนะครับ **