JavaScript นำเสนอที่กำหนดไว้ล่วงหน้า “ เคลียร์ไทม์เอาต์ ()” วิธีการจัดการฟังก์ชันการหมดเวลา ช่วยให้ผู้ใช้สามารถยกเลิกช่วงเวลาที่กำหนดไว้ก่อนหน้านี้โดย “ ตั้งค่าหมดเวลา ()' การทำงาน. มันหยุดการดำเนินการของบล็อคโค้ดที่ทำซ้ำหลังจากช่วงเวลาที่กำหนด ส่วนใหญ่จะใช้สำหรับเว็บไซต์ธนาคารและอีคอมเมิร์ซเพื่อยกเลิกงานที่กำหนดเวลาไว้
โพสต์นี้จะอธิบายวิธีจัดการฟังก์ชัน JavaScript clearTimeout()
วิธีจัดการกับฟังก์ชัน 'clearTimeout ()' ของ JavaScript
“ เคลียร์ไทม์เอาต์ ()” ฟังก์ชั่นยกเลิกช่วงเวลาที่ตั้งค่าไว้ก่อนหน้านี้ด้วยความช่วยเหลือของ “ ตั้งค่าหมดเวลา ()' การทำงาน. “ ตั้งค่าหมดเวลา ()” ฟังก์ชั่นกำหนดช่วงเวลาเพื่อทำงานเฉพาะซ้ำ ๆ ภายในนั้น
ไวยากรณ์
การทำงานของ “ เคลียร์ไทม์เอาต์ ()” วิธีการขึ้นอยู่กับไวยากรณ์พื้นฐานที่เขียนด้านล่าง:
เคลียร์ไทม์เอาต์ ( id_of_settimeout )
ตามไวยากรณ์ข้างต้น ' เคลียร์ไทม์เอาต์ ()” ใช้เวลา “ รหัส ' ของ ' ตั้งค่าหมดเวลา ()” และหยุดช่วงเวลา หากผู้ใช้ไม่ส่ง ID ก็จะไม่ดำเนินการใดๆ
ลองใช้ฟังก์ชันที่กำหนดไว้ข้างต้นโดยใช้ไวยากรณ์พื้นฐาน
ตัวอย่างที่ 1: การใช้ฟังก์ชัน 'clearTimeout()' เพื่อหยุดช่วงเวลาที่กำหนด
ตัวอย่างแรกใช้ ' เคลียร์ไทม์เอาต์ ()” เพื่อหยุดช่วงเวลาที่กำหนด
ขั้นแรกให้ดูที่โค้ด HTML ต่อไปนี้:
< ศูนย์ >< พี > รอ 2 วินาที หน้าเว็บจะแสดงส่วนหัว < / พี >
< h2 รหัส = 'H2' >< / h2 >
< ปุ่ม เมื่อคลิก = 'หยุด()' > หยุดการประหารชีวิต! < / ปุ่ม >
< / ศูนย์ >
ในบรรทัดโค้ดด้านบน:
- “< ศูนย์ >” แท็กจะตั้งค่าการจัดตำแหน่งขององค์ประกอบ HTML ที่กำหนดให้อยู่ตรงกลางของหน้าเว็บ
- “< พี >” แท็กระบุคำสั่งย่อหน้า
- “< h2 >” แท็กเป็นองค์ประกอบส่วนหัวว่างที่มีรหัส “ H2 '.
- “< ปุ่ม >” แท็กแทรกองค์ประกอบปุ่มที่เรียก “ หยุด ()” ฟังก์ชั่นเมื่อแนบมา” เมื่อคลิก ” เหตุการณ์ถูกทริกเกอร์
ถัดไป ใช้ ' เคลียร์ไทม์เอาต์ ()” โดยใช้บล็อกโค้ดที่ระบุ:
< สคริปต์ >ค่าคงที่ ตั้งเวลา = ตั้งค่าหมดเวลา ( เริ่ม , 2000 ) ;
การทำงาน เริ่ม ( ) {
เอกสาร. รับ ElementById ( 'H2' ) . ภายในHTML = 'ยินดีต้อนรับสู่ Linuxhint!'
}
การทำงาน หยุด ( ) {
เคลียร์ไทม์เอาต์ ( ตั้งเวลา ) ;
}
สคริปต์ >
ในข้อมูลโค้ดข้างต้น:
- “ ตั้งเวลา ” ตัวแปรใช้ “ ตั้งค่าหมดเวลา ()” ฟังก์ชันที่ส่งผ่านฟังก์ชัน “ เริ่ม ” ทำหน้าที่เป็นพารามิเตอร์ตัวแรกและระบุ “ ไม่มีมิลลิวินาที ” เป็นพารามิเตอร์ตัวที่สอง ฟังก์ชั่นนี้ดำเนินการ “ เริ่ม ” ทำงานในช่วงเวลาที่กำหนด
- ต่อไปให้กำหนด “ เริ่ม ()' การทำงาน.
- ในฟังก์ชันนี้ “ document.getElementById ()” วิธีการใช้เพื่อเข้าถึงองค์ประกอบส่วนหัวที่ว่างเปล่าซึ่งมีรหัสเป็น “ H2 ” และต่อท้ายด้วยข้อความที่กำหนด
- หลังจากนั้น “ หยุด ()” มีการกำหนดฟังก์ชัน ซึ่งใช้ฟังก์ชัน “ เคลียร์ไทม์เอาต์ ()” วิธีการส่งผ่านรหัสของ “ ตั้งค่าหมดเวลา ()” เพื่อหยุดช่วงเวลา
เอาต์พุต (ก่อนหยุดการดำเนินการ)
ตอนนี้เอาต์พุตจะแสดงองค์ประกอบส่วนหัวในช่วงเวลาที่กำหนดก่อนที่จะหยุดช่วงเวลาที่กำหนดผ่านทาง ' ตั้งค่าหมดเวลา ()' วิธี.
เอาต์พุต (หลังจากหยุดการดำเนินการ)
การคลิกปุ่มที่กำหนดจะหยุดช่วงเวลาที่กำหนดไว้สำหรับการแสดงองค์ประกอบส่วนหัว
ตัวอย่างที่ 2: การใช้ฟังก์ชัน 'clearTimeout()' เพื่อหยุดฟังก์ชัน
ตัวอย่างนี้ใช้ ' เคลียร์ไทม์เอาต์ ()” เพื่อหยุดการทำงานของฟังก์ชัน:
ขั้นแรก ให้อ่านโค้ด HTML ที่ให้มา:
< ศูนย์ >< ปุ่ม เมื่อคลิก = 'เริ่ม()' > เริ่มนับ! < / ปุ่ม >
< ป้อนข้อมูล พิมพ์ = 'ข้อความ' รหัส = 'สนาม' >
< ปุ่ม เมื่อคลิก = 'หยุด()' > หยุดนับ! < / ปุ่ม >
< / ศูนย์ >
ในบล็อคโค้ดด้านบน:
- “< ปุ่ม >” แท็ก แนบ “ เมื่อคลิก ” เพื่อเรียกใช้ฟังก์ชัน “start()” เมื่อคลิก
- “< ป้อนข้อมูล >” แท็กเพิ่มช่องป้อนข้อมูลด้วยประเภท “ ข้อความ ” และรหัส “ช่อง”
- ถัดไป “< ปุ่ม >” ยังแนบเครื่องหมาย “ เมื่อคลิก ” เหตุการณ์ที่จะเรียก “ หยุด ()” เมื่อเหตุการณ์นี้เกิดขึ้น
ตอนนี้ใช้ ' เคลียร์ไทม์เอาต์ ()” โดยใช้บรรทัดรหัสเหล่านี้:
< สคริปต์ >ให้ตอบโต้ = 0 ;
ให้ตั้งเวลา ;
ให้ timer_on = 0 ;
การทำงาน นับ ( ) {
เอกสาร. รับ ElementById ( 'สนาม' ) . ค่า = เคาน์เตอร์ ;
เคาน์เตอร์ ++;
ตั้งเวลา = ตั้งค่าหมดเวลา ( นับ , 1,000 ) ;
}
การทำงาน เริ่ม ( ) {
ถ้า ( ! ตัวจับเวลา_เปิด ) {
ตัวจับเวลา_เปิด = 1 ;
นับ ( ) ;
}
}
การทำงาน หยุด ( ) {
เคลียร์ไทม์เอาต์ ( ตั้งเวลา ) ;
ตัวจับเวลา_เปิด = 0 ;
}
สคริปต์ >
ในบรรทัดโค้ดด้านบน:
- ประการแรก “ อนุญาต ” คำหลักประกาศตัวแปรสามตัว “ ตัวนับ”, “setTime” และ “timer_on '.
- ต่อไป “ นับ ()” ฟังก์ชันถูกกำหนดไว้
- ในคำจำกัดความของคำว่า “ document.getElementById() ” วิธีการถูกนำมาใช้ในการเข้าถึงช่องป้อนข้อมูลที่เพิ่มโดยใช้รหัสของมัน “ สนาม ” และต่อท้ายด้วยค่าของ “ เคาน์เตอร์ ' ตัวแปร.
- ตอนนี้ให้เพิ่มมูลค่าของ “ เคาน์เตอร์ ' ตัวแปร.
- สุดท้ายนี้ ใช้ ' ตั้งค่าหมดเวลา ()” วิธีการดำเนินการของ “ นับ ()” ในช่วงเวลาที่กำหนด
- หลังจากนั้นให้กำหนดฟังก์ชันชื่อ “ เริ่ม ()”
- ในฟังก์ชันนี้ “ ถ้า ” จะใช้คำสั่งที่ระบุเงื่อนไข เช่น ถ้า “ ไอเมอร์_ออน ' ไม่ใช่ ' บน ” แล้วมันก็เท่ากับ “ 1 ' และ ' นับ ()” เรียกว่าฟังก์ชัน
- ตอนนี้มีการกำหนดฟังก์ชันอื่นชื่อ “ หยุด ()”
- ในคำจำกัดความ “ เคลียร์ไทม์เอาต์ ()” วิธีการถูกนำมาใช้ผ่านรหัสของ “ ตั้งค่าหมดเวลา ()” วิธีเช่น “ ตั้งเวลา '.
เอาท์พุต
สังเกตได้ว่า “ เริ่มนับ ปุ่ม ” เริ่มการนับที่เพิ่มขึ้นทุกๆ 1 วินาที การนับนี้จะหยุดลงโดยคลิกที่ “ หยุดนับ! ' ปุ่ม.
นั่นคือทั้งหมดที่เกี่ยวกับการจัดการฟังก์ชัน clearTimeout() ใน JavaScript
บทสรุป
“ เคลียร์ไทม์เอาต์ ()” ฟังก์ชั่นจัดการช่วงเวลาที่ระบุด้วยความช่วยเหลือของ “ ตั้งค่าหมดเวลา ()' การทำงาน. มันดำเนินการงานนี้โดยส่งรหัสของ “setTimeout()” ทำหน้าที่เป็นพารามิเตอร์ที่จำเป็น ใช้สำหรับการยกเลิกงานที่ดำเนินการในช่วงเวลาที่กำหนดซึ่งตั้งค่าไว้โดยใช้ปุ่ม “ ตั้งค่าหมดเวลา ()' การทำงาน. โพสต์นี้ได้อธิบายขั้นตอนในการจัดการฟังก์ชัน JavaScript clearTimeout() ในทางปฏิบัติแล้ว