jQuery นับเวลาถอยหลัง ด้วยคำสั่ง setInterval

jQuery นับเวลาถอยหลัง ด้วยคำสั่ง setInterval บทความนี้สอนใช้ jQuery Framework เพื่อสร้างโค้ดนับเวลาถอยหลัง 5 ถึง 1 โดยใช้คำสั่งของ jQuery ร่วมกับ JavaScript คือ setInterval สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง jQuery นับเวลาถอยหลัง ด้วยคำสั่ง setInterval

<div id="result"></div>

<script>
    $(document).ready(function(){
        let i = 5;
        var counter = setInterval(() => {
            $("#result").text( i );
            i--;
            if( i == -1 ) {
                clearInterval( counter );
                $("#result").text( "Go!!" );
            }
        }, 1000);
    });
</script>

jQuery นับเวลาถอยหลัง ด้วยคำสั่ง setInterval มีรายละเอียดดังนี้

1. ตัวเลขนับเวลาถอยหลัง จะแสดงที่ div id เท่ากับ result

2. ใช้คำสั่ง $(document).ready เมื่อ DOM พร้อมโหลด JavaScript แล้วให้ทำงานในฟังก์ชันดังกล่าว

3. สร้างตัวแปร i เริ่มต้นคือ 5 เพราะจะนับถอยหลัง 5 ถึง 1 จากนั้นใช้คำสั่ง setInterval ให้ทำงานทุกๆ 1000 มิลลิวินาที หรือ 1 วินาที ตังแปรชื่อ counter

4. แสดงตัวแปร i ที่ element id = result ด้วยคำสั่ง text จากนั้นลบตัวแปร ลงทีละ 1 ทุกครั้งที่เข้ามาทำงานในคำสั่ง setInterval ทำให้แสดงตัวเลขย้อนหลัง 5 ถึง 1 ที่หน้าเว็บไซต์

5. จากนั้นเมื่อ i == -1 ให้ยกเลิกการทำงานของ setInterval ด้วยคำสั่ง clearInterval พร้อมกับแสดงข้อความ “Go!!” ที่ element id = result