SetInterval ใน JavaScript คืออะไรและทำงานอย่างไร

JavaScript ใช้เป็นภาษาโปรแกรมฝั่งไคลเอ็นต์เช่นเดียวกับภาษาโปรแกรมฝั่งเซิร์ฟเวอร์ มันมีวิธีการมากมายเหลือเฟือสำหรับฟังก์ชันต่างๆที่จะดำเนินการได้อย่างง่ายดาย นี่คือสิ่งที่ทำ ภาษาโปรแกรมที่ได้รับความนิยมมากที่สุดภาษาหนึ่งและยังมีการใช้กันอย่างแพร่หลายในการพัฒนาผลิตภัณฑ์หลายประเภทSetInterval ใน JavaScript เป็นส่วนหนึ่งของ Timing Events ใน JavaScript และเราจะเรียนรู้เกี่ยวกับมันตามลำดับต่อไปนี้:

• เหตุการณ์เวลา
• SetInterval ใน JavaScript
• จะหยุดการดำเนินการได้อย่างไร?

เหตุการณ์เวลา

JavaScript ยังอนุญาตให้เรียกใช้ไฟล์ ฟังก์ชั่น ตลอดจนวิธีการที่เกี่ยวข้องกับเวลาไม่ใช่เวลาดำเนินการของโปรแกรม สิ่งนี้อนุญาตให้เรียกใช้ฟังก์ชันตามเวลาที่กำหนดโดยไม่คำนึงถึงเวลาของการทำงานของโปรแกรม

สองวิธีหลักในการใช้ Timing Events ใน JavaScript ได้แก่ :

• setTimeout (ฟังก์ชันมิลลิวินาที)

  
  
  

ฟังก์ชันนี้เรียกใช้ฟังก์ชันภายในซึ่งส่งผ่านเป็นพารามิเตอร์เพียงครั้งเดียวหลังจากเวลาที่ระบุเป็นมิลลิวินาที

• setInterval (ฟังก์ชันมิลลิวินาที)

ฟังก์ชันนี้เรียกใช้ฟังก์ชันจากเวลาดำเนินการและหลังจากถึงช่วงเวลาทุกครั้ง ทำซ้ำการเรียกใช้ฟังก์ชันในทุกช่วงเวลา

วิธีสร้างรายการที่เชื่อมโยงในค

ตอนนี้เรามาดูกันว่า SetInterval ใน JavaScript ทำงานอย่างไร

SetInterval ใน JavaScript

พารามิเตอร์แรกของฟังก์ชันนี้คือฟังก์ชันที่จะดำเนินการและพารามิเตอร์ที่สองระบุช่วงเวลาระหว่างการดำเนินการแต่ละครั้ง

var myVar = setInterval (myTimer, 1000) ฟังก์ชัน myTimer () {var d = new Date () document.getElementById ('demo'). innerHTML = d.toLocaleTimeString ()}

ที่นี่ document.getElementById ได้รับองค์ประกอบจาก ซึ่งมี id เป็นฟังก์ชัน“ demo” และ d.toLocaleTimeString () ให้เวลาปัจจุบันจากระบบ

ดังนั้นสิ่งนี้จะถูกทำซ้ำทุกๆ 1,000 มิลลิวินาทีซึ่งเทียบเท่ากับ 1 วินาที ดังนั้นฟังก์ชันจะถูกเรียกใช้งานซ้ำ ๆ ทุกๆ 1 วินาทีและด้วยเหตุนี้จึงมีการอัพเดตเวลาทุกวินาที

แล้วเราจะหยุดการดำเนินการนี้ได้อย่างไร? มาดูกัน!

จะหยุดการดำเนินการได้อย่างไร?

เราสามารถหยุดการดำเนินการจากฟังก์ชัน setInterval () ด้วยความช่วยเหลือของฟังก์ชันอื่นที่เรียกว่า clearInterval ()clearInterval () ใช้ตัวแปรที่ส่งคืนจากฟังก์ชัน setInterval ()

ตัวอย่างเช่น:

myVar = setInterval (ฟังก์ชันมิลลิวินาที) clearInterval (myVar)

ด้านล่างนี้เป็นตัวอย่างที่ใช้ทั้ง setInterval () และ clearInterval () ซึ่งจะเริ่มนาฬิกาและมีปุ่มสำหรับหยุดเวลา

 
ด้านล่างเป็นนาฬิกา
หยุดเวลา 
 
คลิกปุ่มด้านบนเพื่อหยุดเวลา
var myVar = setInterval (myTimer, 1000) ฟังก์ชัน myTimer () {var d = new Date () document.getElementById ('demo'). innerHTML = d.toLocaleTimeString ()}

เอาท์พุต:

ตัวอย่างเพิ่มเติมด้วย setInterval () และ clearInterval ()

การสร้างแถบความคืบหน้าแบบไดนามิก

#myProgress {width: 100% height: 30px position: relative background-color: #ddd} #myBar {background-color: # 4CAF50 width: 10px height: 30px position: absolute} 
คลิก Me function move () {var elem = document.getElementById ('myBar') var width = 0 var id = setInterval (frame, 10) function frame () {if (width == 100) {clearInterval (id)} else {width ++ elem.style.width = width + '%'}}}

เอาท์พุต:

ผลลัพธ์เริ่มต้น

แสดงผลหลังจากคลิกที่ปุ่มซึ่งระบุว่า“ คลิกฉัน”

สลับระหว่างสองพื้นหลัง

หยุดการสลับ var myVar = setInterval (setColor, 300) ฟังก์ชัน setColor () {var x = document.body x.style.backgroundColor = x.style.backgroundColor == 'yellow'? 'pink': 'yellow'} ฟังก์ชัน stopColor () {clearInterval (myVar)}

เอาท์พุต:

สีจะถูกสลับระหว่างสีเหลืองและสีชมพู ผลลัพธ์ด้านบนคือก่อนคลิกที่ปุ่มและด้านล่างคือหลังจากคลิกที่ปุ่ม

การลบล้างเทียบกับการโอเวอร์โหลด c ++

ด้วยเหตุนี้เราจึงมาถึงตอนท้ายของบทความ SetInterval ใน JavaScript ฉันหวังว่าคุณจะเข้าใจวิธีการทำงานของ SetInterval

ตรวจสอบไฟล์ โดย Edureka การฝึกอบรมการรับรองการพัฒนาเว็บจะช่วยให้คุณเรียนรู้วิธีสร้างเว็บไซต์ที่น่าประทับใจโดยใช้ HTML5, CSS3, Twitter Bootstrap 3, jQuery และ Google API และปรับใช้กับ Amazon Simple Storage Service (S3)

มีคำถามสำหรับเรา? โปรดระบุไว้ในส่วนความคิดเห็นของบล็อกนี้แล้วเราจะติดต่อกลับไป