การใช้งาน interval ใน
javascript สำหรับการนำมา
Loop การทำงานเป็น loop นั้นใน javascript นั้นจะมีการทำ loop แบบที่ไม่รู้จบอยู่ครับซึ่งการทำ loop แบบนั้นเราจะใช้งาน Interval interval นั้นเป็นคำสั่ง
คำสั่ง นึงที่สามารถใช้งานสำหรับการ loop โค้ดส่วนนึงได้โดยไม่จำกัดครั้ง โดยส่วนมาก loop ของเรานั้นจะทำ loop ไปเรื่อยๆจนถึงจุดสิ้นสุดของโค้ดซึ่งการทำงานแบบนั้นเราจำเป็นจะต้องทำการกำหนดจำนวนรอบภายใน Loop เอาไว้อย่างชัดเจนและจากนั้นถ้าหากว่าไม่ทำให้จบใน Loop นั้นโค้ดส่วนต่อไปก็จะยังทำงานต่อไปไม่ได้จนกว่าจะจบ loop แต่ไม่ใช่กับ interval ครับ
interval นั้นจะอธิบายง่ายนั้นก็คือ Loop ที่เราไม่จำเป็นจะต้องทำ loop ก่อนซึ่งข้อดีนั้นก็คือเราสามารถเขียนให้ interval นั้นดีเลย์ระหว่างแต่ละรอบของการวนแต่ละรอบได้ ซึ่งเราสามารถใช้งานได้ง่ายๆเลยเพียงแค่เรานั้นจะต้องตั้งชื่อตัว Interval ก่อนครับเหมือนกับประกาศตัวแปรเลย จากนั้นเราจะมากำหนดโค้ดในส่วนที่จะทำงานกันครับ
โค้ด: เลือกทั้งหมด
<script>
var intervalId1
intervalId1 = setInterval(() => {
console.log("helloworld")
}, 1000);
</script>
จากโค้ดนี้เป็นโค้ดที่ใช้สำหรับการสร้าง interval จะเห็นได้ว่าผมได้ทำการสร้างตัวแปร intervalid1 ขึ้นมาจากนั้น setinterval ขึ้นมาครับผม แล้วต่อจากนี้ในวงเล็บปีกกา {} ทั้งหมดนั้นจะเป็นโค้ดที่จะทำ Loop ซึ้งในที่นี้ผมจะทำการ print helloworld ออกมา และจากนั้นทุกๆ 1000 millisecond หรือก็คือ 1 วินาทีครับ ซึ่งตรงนี้เราสามารถปรับไปมาได้ครับโดยหลักของเวลานั้นเป็นหลังก millisecond หรือก็คือ 1000 = 1 วินาทีครับและจากนั้นมันก็จะทำการ Loop คำว่า helloworld ออกเรื่อยๆทุกๆ 1 วินาทีครับ
- ผลลัพธ์การ intarval
- ผลลัพธ์การ intorval.gif (7.34 KiB) Viewed 1284 times
ซึ่งจากภาพก็จะเห็นได้ว่า helloworld นั้นจะถูกแสดงออกมาในทุกๆ 1 วินาทีครับ ซึ่งถ้าหากว่าสงสัยว่าเรานั้นจะหยุด interval ยังไงดีนั้นเรานั้นจำเป็นจะต้อง clear interval เพื่อหยุดเท่านั้นครับ
และเพียงแค่เราใช้งานโค้ดในส่วนนี้รันตัว ืะำพอฟส ี่เราสร้างมาเป็นตัวแปรไว้ตั้งแต่แรกที่ใช้ชื่อว่า intervalId1 นั้นจะหยุดทำงานครับผม
ซึ่งจากในกระทู้นี้จะเป็นการสอนการใช้งาน
Interval ที่เอาไว้ใช้สำหรับการสร้าง loop โค้ดออกมาเรื่อยๆโดยที่เรานั้นไม่จำเป็นจะต้องกำหนดจำนวนรอบได้ซึ่งเหมาะกับการทำงานประเภทการจับเวลาหรือก็ส่งข้อมูลเป็นรอบๆอย่างไม่มีที่สิ้นสุดอย่างแน่นอนได้ครับอีกทั้งยังสามารถทำงานไปควบคู่กับโค้ดส่วนอื่นได้โดยที่การทำงานของ interval นั้นจะไม่ทำให้เกิดการหยุดรอครับหรือก็คือโค้ดนั้นจะทำงานยไปพร้อมกันได้โดยไม่ต้องหยุดรอจนกว่าเราจะทำ loop เสร็จครับ อีกทั้งยังสอนวิธีการ
clear Interval อีกด้วยครับ
อ้างอิง
https://www.w3schools.com/jsref/met_win_setinterval.asp
https://developer.mozilla.org/en-US/docs/Web/API/setInterval
https://www.w3schools.com/JSREF/met_win_clearinterval.asp