ฉันเรียนรู้ JS เมื่อไม่กี่วันที่ผ่านมาและเห็นฟังก์ชั่นที่น่าสนใจสองอย่างคือฟังก์ชั่น settimeout และฟังก์ชั่น setInterval ฟังก์ชั่นทั้งสองนี้สามารถทำให้หน้าเว็บนำเสนอเอฟเฟกต์ที่พบบ่อยในหน้าเว็บเช่นม้าหมุนรูปภาพและเอฟเฟกต์ที่สนุกมาก มาเรียนรู้เกี่ยวกับฟังก์ชั่นทั้งสองนี้ด้านล่าง!
ไวยากรณ์และแอปพลิเคชันของฟังก์ชัน settimeout และฟังก์ชัน setInterval
1. ฟังก์ชั่น Settimeout
คำจำกัดความและการใช้งาน: วิธี Settimeout () ใช้เพื่อเรียกใช้ฟังก์ชันหรือคำนวณนิพจน์หลังจากจำนวนมิลลิวินาทีที่ระบุ
ไวยากรณ์: settimeout (รหัส, millisec);
พารามิเตอร์:
รหัส (จำเป็น): สตริงรหัส JavaScript ที่จะดำเนินการหลังจากเรียกใช้ฟังก์ชัน
MILLISEC (จำเป็น): จำนวนมิลลิวินาทีที่จะรอก่อนที่จะเรียกใช้รหัส
คำใบ้:
settimeout () เรียกใช้งานรหัสเพียงครั้งเดียว หากคุณต้องการโทรหลายครั้งให้ใช้ setInterval () หรือมีรหัสตัวเองเรียกใช้ setTimeout () อีกครั้ง
ค่าส่งคืน
ค่าที่สามารถส่งผ่านไปยัง window.cleartimeout () เพื่อยกเลิกการดำเนินการของรหัสเป็นระยะ
เนื่องจาก Settimeout เป็นฟังก์ชั่นตัวจับเวลาจึงมีฟังก์ชั่นในการทำความสะอาดตัวจับเวลาดังนั้นเราจึงใช้ฟังก์ชั่น ClearTimeOut
ClearTimeOut (ค่า ID ส่งคืนโดย setTimeOut ());
2. คำจำกัดความของ SetInterval
เมธอด setInterval () เรียกฟังก์ชันหรือคำนวณการแสดงออกตามระยะเวลาที่ระบุ (เป็นมิลลิวินาที)
เมธอด setInterval () จะเรียกใช้ฟังก์ชันอย่างต่อเนื่องจนกว่าจะเรียก ClearInterval () หรือปิดหน้าต่าง ค่า ID ที่ส่งคืนโดย setInterval () สามารถใช้เป็นพารามิเตอร์ไปยังวิธี ClearInterval ()
ไวยากรณ์
setInterval (รหัส, millisec [, "lang"]);
จำเป็นต้องใช้รหัสพารามิเตอร์ ฟังก์ชั่นที่จะเรียกหรือสตริงของรหัสที่จะดำเนินการ
มิลลิวินาทีต้อง ช่วงเวลาระหว่างการดำเนินการเป็นระยะหรือรหัสการโทรในมิลลิวินาที
ค่าส่งคืน
ค่าที่สามารถส่งผ่านไปยัง window.clearinterval () เพื่อยกเลิกการดำเนินการเป็นระยะของรหัส
เนื่องจาก Settimeout เป็นฟังก์ชั่นตัวจับเวลาจึงมีฟังก์ชั่นในการทำความสะอาดตัวจับเวลาดังนั้นเราจึงใช้ฟังก์ชั่น ClearInterval ()
ClearInterval () (ค่า id ส่งคืนโดย setInterval ());
2. กรณี:
เอฟเฟกต์การนับถอยหลัง
<! doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "html; charset = utf-8 วิธี JS เพื่อให้ได้เอฟเฟกต์การนับถอยหลัง VAR T1; window.onload = function () {// 01 ตำแหน่งไปยังปุ่มเริ่มต้นและส่งคืนวัตถุ DOM var btns = document.getElementById ('btnstart'); // 02. ลงทะเบียนเหตุการณ์คลิกสำหรับปุ่มเริ่มต้น btns.onclick = function () {// ดำเนินการฟังก์ชั่นที่พารามิเตอร์แรกของฟังก์ชัน setInterval จะถูกดำเนินการเป็นประจำและพารามิเตอร์ที่สองคือฟังก์ชั่นที่ดำเนินการทุกมิลลิวินาที T1 = setInterval (เริ่ม 1,000); } // 03 ตำแหน่งไปยังปุ่มหยุดเพื่อส่งคืนวัตถุ DOM var btnst = document.getElementById ('btnstop'); btnst.onclick = function () {clearInterval (t1); }} // ฟังก์ชั่นที่จะดำเนินการ 1 ฟังก์ชั่นเริ่มต้น () {// 01 รับข้อความใน div เพื่อกำหนดให้กับตัวแปร var divdom = document.getElementById ('msg'); var divnum = divdom.innertext; // ตัดสินว่าค่าของ divnum คือ 0 ถ้า (divnum> 0) {divnum--; // กำหนดค่าที่ถูกหักออกให้เป็น divnum divdom.innerText = divnum; }} </script> </head> <body> <input type = "ปุ่ม" id = "btnstart" value = "start"/> <อินพุต type = "ปุ่ม" id = "btnstop" value = "หยุด"/> <br/> <div id = "msg"การสลับภาพพื้นหลัง:
<! doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" type = "html; charset = utf-8"/> 1; // กำหนดตัวแปรเริ่มต้นเป็นภาพแรกโดย default window.onload = function () {// กำหนดฟังก์ชั่นการแสดงทุกวินาทีโดยใช้ฟังก์ชันตัวจับเวลาเพื่อเรียกใช้ setInterval (แสดง, 1000); } // ฟังก์ชั่นที่จะดำเนินการฟังก์ชั่นแสดง () {// ถ้าภาพถึงภาพสุดท้าย (5 รูปภาพ) ให้เปลี่ยนภาพที่แสดงถัดไปเป็นภาพแรก หากภาพสุดท้ายไม่ถึงภาพถัดไปจะปรากฏขึ้นหาก (นับ> 5) {count = 1; } else {count ++; } // รับวัตถุ DOM ด้วย id myimg var dom = document.getElementById ("myimg"); // เปลี่ยนแอตทริบิวต์ SRC ที่ชี้ของแท็ก IMG และเปลี่ยนภาพ dom.src = "image/"+count+". jpg"} </script> </head> <body> <img src = "image/1.jpg" id = "myimg"/> </body> </html>ผู้โทรหาชื่อ
<! doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" text = "html; charset = utf-8"/> อาร์เรย์เพื่อบันทึกข้อมูลพื้นฐานใน namer var data = ['Zhang San', 'Li Si', 'Wang er', 'Xiao Chen', 'Xiao Zhang']; var i = 0; // ประกาศตัวแปรเริ่มต้นเพื่อให้บุคคลแรกแสดงบนหน้าโดยเริ่มต้น var t1; window.onload = function () {// 02 รับวัตถุ DOM ของปุ่ม start-name เพื่อลงทะเบียนเหตุการณ์คลิกสำหรับวัตถุ var dom = document.getElementById ("mybtn"); dom.onclick = function () {// ใช้ฟังก์ชัน setInterval เพื่อเรียกฟังก์ชันผลลัพธ์ t1 = setInterval (เริ่มต้น, 500); // วิธีนี้เรียกใช้ settimeout เท่านั้น (หยุด, 6000); } // กำหนดฟังก์ชั่นที่ไม่ระบุชื่อเพื่อกำหนดให้กับผลลัพธ์ตัวแปร var start = function () {// 03get tag tag วัตถุและกำหนดค่าให้กับข้อความของแท็ก H1 tag var domh = document.getElementById ("MyH1"); domh.innertext = data [i % data.length]; // แทนที่ค่าองค์ประกอบที่มีอยู่ i ++; } // เรียกฟังก์ชันที่ไม่ระบุชื่อเริ่มต้น (); var stop = function () {// ล้างตัวจับเวลา ClearInterval (T1); // นักเรียนที่คลิกที่กล่องพรอมต์ปรากฏขึ้นและตอบรับการแจ้งเตือน ("โปรด" + document.getElementById ("MyH1"). innerText + "นักเรียนตอบ"); }}} </script> </head> <body> <h1 id = "myh1"> </h1> <button id = "mybtn"> เริ่มโทร </button> </body> </html>ผ่านกรณีข้างต้นฉันเชื่อว่าทุกคนควรคุ้นเคยกับฟังก์ชั่นทั้งสองนี้
บทความข้างต้นมีความเข้าใจอย่างลึกซึ้งเกี่ยวกับฟังก์ชั่น settimeout และฟังก์ชัน setInterval บทความนี้เป็นเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่ามันจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น