setInterval กับ setTmeout ต่างกันอย่างไร

คำสั่ง setInterval กับ setTmeout ต่างกันตรงที่ setInterval จะทำงานตลอดตามเวลาที่กำหนดไว้ เช่น ทำทุกๆ 5 วินาที ส่วน setTmeout จะทำแค่ครั้งเดียวตามเวลาที่กำหนดไว้ เช่น รอ 5 วินาทีแล้วค่อยทำ สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง คำสั่ง setInterval และ setTmeout

<script>
    function helloWithSetInterval() {
        var date = new Date();
        console.log( 'สวัสดีจากคำสั่ง setInterval '+date );
    }

    function helloWithSetTimeout() {
        var date = new Date();
        console.log( 'สวัสดีจากคำสั่ง setTimeout '+date );
    }

    setInterval("helloWithSetInterval()", 5000);
    setTimeout("helloWithSetTimeout()", 5000);
</script>

ผลลัพธ์

สวัสดีจากคำสั่ง setInterval Sat Jan 22 2022 11:39:54 GMT+0700 (เวลาอินโดจีน)
สวัสดีจากคำสั่ง setTimeout Sat Jan 22 2022 11:39:54 GMT+0700 (เวลาอินโดจีน)
สวัสดีจากคำสั่ง setInterval Sat Jan 22 2022 11:39:59 GMT+0700 (เวลาอินโดจีน)
สวัสดีจากคำสั่ง setInterval Sat Jan 22 2022 11:40:04 GMT+0700 (เวลาอินโดจีน)
สวัสดีจากคำสั่ง setInterval Sat Jan 22 2022 11:40:09 GMT+0700 (เวลาอินโดจีน)
สวัสดีจากคำสั่ง setInterval Sat Jan 22 2022 11:40:14 GMT+0700 (เวลาอินโดจีน)

1. สร้าง 2 ฟังก์ชัน คือ helloWithSetInterval และ helloWithSetTimeout พิมพ์ข้อความ และเวลาจากคำสั่ง new Date เพื่อให้เห็นว่าเวลามีการเปลี่ยนแปลงทุกครั้งที่ฟังก์ชันถูกเรียกใช้งาน

2. ฟังก์ชัน helloWithSetInterval ใช้คำสั่ง setInterval กำหนด 5000 มิลลิวินาที คือ 5 วินาที

3. ฟังก์ชัน helloWithSetTimeout ใช้คำสั่ง setTimeout กำหนด 5000 มิลลิวินาที คือ 5 วินาที

4. ฟังก์ชัน helloWithSetInterval จะทำงานทุก 5 วินาที ตลอด ส่วนฟังก์ชัน helloWithSetTimeout จะทำงานครั้งเดียวหลังเว็บไซต์เปิดขึ้นมา 5 วินาที และจะไม่ทำงานอีก

5. สังเกตผลลัพธ์ คำสั่ง setTimeout ทำงานครั้งเดียวตอน 11:39:54 ส่วน คำสั่ง setInterval ทำงานตลอดทุกๆ 5 วินาที ตั้งแต่ 11:39:54 จนถึง 11:40:14