1. ตัวจับเวลาที่ดำเนินการเพียงครั้งเดียว
คัดลอกรหัสรหัสดังต่อไปนี้:
<สคริปต์>
//ตัวจับเวลาทำงานแบบอะซิงโครนัส
ฟังก์ชั่นสวัสดี(){
alert("สวัสดี");
-
//ดำเนินการวิธีการโดยใช้ชื่อวิธีการ
var t1 = window.setTimeout(สวัสดี 1,000);
var t2 = window.setTimeout("hello()",3000);//ใช้วิธีการดำเนินการสตริง
window.clearTimeout(t1);//ลบตัวจับเวลา
</สคริปต์>
2. ตัวจับเวลาการดำเนินการซ้ำ
คัดลอกรหัสรหัสดังต่อไปนี้:
<สคริปต์>
ฟังก์ชั่นสวัสดี(){
alert("สวัสดี");
-
// ทำซ้ำวิธีการ
var t1 = window.setInterval(สวัสดี,1,000);
var t2 = window.setInterval("hello()",3000);
//วิธีลบตัวจับเวลา
หน้าต่าง.clearInterval(t1);
</สคริปต์>
หมายเหตุ:
หากมีสองวิธีบนเพจ ซึ่งทั้งสองวิธีจะถูกดำเนินการหลังจากโหลดเพจแล้ว แต่จริงๆ แล้วไม่สามารถดำเนินการตามลำดับได้ คุณสามารถอ้างอิงถึงวิธีการต่อไปนี้เพื่อแก้ไขปัญหา:
คุณสามารถเพิ่มตัวจับเวลาในวิธี onload ตั้งเวลา และ "หน่วงเวลา" ไว้ช่วงระยะเวลาหนึ่งก่อนที่จะรัน ซึ่งถือได้ว่าเป็นการแยกลำดับของการโหลดหน้าเว็บและวิธีการทำงาน
ใน JavaScript มีฟังก์ชันเฉพาะสองฟังก์ชันสำหรับตัวจับเวลา ได้แก่:
1. ตัวจับเวลาถอยหลัง: timename=setTimeout("function();",delaytime);
2. ตัวจับเวลาแบบวนซ้ำ: timename=setInterval("function();",delaytime);
พารามิเตอร์แรก "function()" คือการดำเนินการที่จะดำเนินการเมื่อมีการทริกเกอร์ตัวจับเวลา อาจเป็นฟังก์ชันเดียวหรือหลายฟังก์ชันก็ได้ เช่น หากคุณต้องการให้หน้าต่างคำเตือนปรากฏขึ้นมา 2 หน้าต่าง ให้แทนที่ "function();" ด้วย
"alert('First warning window!');alert('Second warning window!');"; และพารามิเตอร์ที่สอง "delaytime" คือช่วงเวลาในหน่วยมิลลิวินาที นั่นคือ กรอก "5000 " หมายถึง 5 วินาที
ตัวจับเวลาถอยหลังจะทริกเกอร์เหตุการณ์หลังจากถึงเวลาที่กำหนด ในขณะที่ตัวจับเวลาแบบวนซ้ำจะทริกเกอร์เหตุการณ์ซ้ำๆ เมื่อถึงช่วงเวลา ความแตกต่างระหว่างทั้งสองคือแบบแรกจะดำเนินการเพียงครั้งเดียว ในขณะที่แบบหลังจะดำเนินการอย่างต่อเนื่อง
ตัวอย่างเช่น หลังจากที่คุณเปิดหน้าเว็บและต้องการข้ามไปยังหน้าอื่นโดยอัตโนมัติทุกๆ สองสามวินาที คุณจะต้องใช้ตัวนับเวลาถอยหลัง "setTimeout("function();",delaytime)" และหากคุณต้องการตั้งประโยคบางประโยค ปรากฏทีละคน
คุณต้องใช้ตัวจับเวลาแบบวนซ้ำ "setInterval("function();",delaytime)"
เพื่อให้ได้โฟกัสของแบบฟอร์ม จะใช้ document.activeElement.id ใช้ if เพื่อพิจารณาว่า document.activeElement.id และ ID ของแบบฟอร์มเหมือนกันหรือไม่
ตัวอย่างเช่น: if ("mid" == document.activeElement.id) {alert();}, "mid" คือ ID ที่สอดคล้องกับแบบฟอร์ม
ตัวจับเวลา:
ใช้เพื่อระบุโปรแกรมที่จะดำเนินการหลังจากช่วงระยะเวลาหนึ่ง
การดำเนินการจับเวลาใน JS ความแตกต่างระหว่าง setTimeout และ setInterval และวิธีการยกเลิก
setTimeout(Expression,DelayTime) หลังจาก DelayTime นิพจน์จะถูกดำเนินการ setTimeout ใช้เพื่อหน่วงเวลาช่วงระยะเวลาหนึ่งก่อนที่จะดำเนินการ
setTimeout("function",time) ตั้งค่าวัตถุหมดเวลา
setInterval(expression, DelayTime) แต่ละ DelayTime จะดำเนินการ Expression ซึ่งมักจะใช้เพื่อรีเฟรชนิพจน์
setInterval("function",time) ตั้งค่าวัตถุหมดเวลา
SetInterval ทำซ้ำโดยอัตโนมัติ และ setTimeout จะไม่เกิดซ้ำ
clearTimeout(object) ล้างวัตถุ setTimeout ที่ตั้งไว้
clearInterval(object) ล้างวัตถุ setInterval
เพียงแค่ยกตัวอย่างสองตัวอย่าง
ตัวอย่างที่ 1 เมื่อแบบฟอร์มถูกทริกเกอร์หรือโหลด ให้ส่งออกสตริงคำต่อคำ
คัดลอกรหัสรหัสดังต่อไปนี้:
<html>
<หัว>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>เอกสารที่ไม่มีชื่อ</title>
<script language="JavaScript" type="text/javascript">
var str = "นี่คือข้อความตัวอย่างสำหรับการทดสอบ";
var seq = 0;
var วินาที = 1,000; // ช่วงเวลา 1 วินาที
ฟังก์ชั่นเลื่อน () {
msg = str.substring(0, seq+1);
document.getElementByIdx_x_x('คำ').innerHTML = msg;
ซีคิว++;
ถ้า (seq >= str.length) seq = 0;
-
</สคริปต์>
</หัว>
<body onload="setInterval('scroll()',วินาที)">
<div id="word"></div><br/><br/>
</ร่างกาย>
</html>
ตัวอย่างที่ 2 เมื่อโฟกัสอยู่ที่กล่องอินพุต ให้ตรวจสอบข้อมูลกล่องอินพุตเป็นประจำ และอย่าดำเนินการตรวจสอบเมื่อไม่ได้เปิดโฟกัส
คัดลอกรหัสรหัสดังต่อไปนี้:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<หัว>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>เอกสารที่ไม่มีชื่อ</title>
<script language="JavaScript" type="text/javascript">
var วินาที = 5,000; // ช่วงเวลา 5 วินาที
วาร์ค=0;
ฟังก์ชั่นเลื่อน () {
ค++;
ถ้า ("b" == document.activeElement.id) {
var str="ตรวจสอบตามกำหนดเวลา<b> "+c+" </b>เวลา<br/>";
ถ้า(document.getElementByIdx_x_x('b').value!=""){
str+="เนื้อหาปัจจุบันของช่องป้อนข้อมูลคือ<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";
-
document.getElementByIdx_x_x('คำ').innerHTML = str;
-
-
</สคริปต์>
</หัว>
<ร่างกาย>
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',วินาที)"></textarea><br/><br/ >
<div id="word"></div><br/><br/>
</ร่างกาย>
</html>
ตัวอย่างที่ 3 ต่อไปนี้เป็นตัวอย่างที่ง่ายที่สุด หน้าต่างคำเตือนจะปรากฏขึ้นหลังจากหมดเวลา
คัดลอกรหัสรหัสดังต่อไปนี้:
<html xmlns="http://www.w3.org/1999/xhtml">
<หัว>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<ภาษาสคริปต์ = "จาวาสคริปต์">
ฟังก์ชั่นนับ () {
document.getElementByIdx_x_x('m').innerHTML="ตัวจับเวลาเริ่มต้นแล้ว!";
setTimeout("alert('สิบวินาทีขึ้นไป!')",10000)
-
</สคริปต์>
<ร่างกาย>
<div id="m"></div>
<input TYPE="ปุ่ม" value="ตัวจับเวลาเริ่มต้น" onclick="count()">
</ร่างกาย>
</html>
ตัวอย่างที่ 4: การข้ามเวลานับถอยหลัง
คัดลอกรหัสรหัสดังต่อไปนี้:
<html>
<หัว>
<ฐาน href="<%=basePath%>">
<title>หน้าเริ่มต้น JSP 'ds04.jsp' ของฉัน</title>
<span id="tiao">3</span>
<a href="javascript:countDown"> </a> ข้ามโดยอัตโนมัติหลังจากวินาที...
<meta http-equiv=รีเฟรชเนื้อหา=3;url= '/ds02.jsp'/>
<!--สคริปต์เริ่มต้น-->
<ภาษาสคริปต์ = "javascript" type="">
ฟังก์ชั่นนับถอยหลัง (วินาที) {
tiao.innerText=วินาที;
ถ้า(--วินาที>0)
setTimeout("countDown("+วินาที+")",1000);
-
นับถอยหลัง(3);
</สคริปต์>
<!--สิ้นสุดสคริปต์-->
</หัว>
ตัวอย่างที่ 6:
คัดลอกรหัสรหัสดังต่อไปนี้:
<หัว>
<meta http-equiv="refresh" content="2;url='b.html'">
</หัว>
ตัวอย่างที่ 7:
คัดลอกรหัสรหัสดังต่อไปนี้:
<script language="javascript" type="text/javascript">
setTimeout("window.location.href='b.html'", 2000);
//สามารถใช้ได้ทั้งสองอย่างต่อไปนี้
//setTimeout("javascript:location.href='b.html'", 2000);
//setTimeout("window.location='b.html'", 2000);
</สคริปต์>
ตัวอย่างที่ 8:
คัดลอกรหัสรหัสดังต่อไปนี้:
<span id="totalSecond">2</span>
<script language="javascript" type="text/javascript">
var วินาที = document.getElementByIdx_x('totalSecond').innerHTML;
ถ้า (คือNaN (วินาที)) {
//...ไม่ใช่วิธีการประมวลผลเชิงตัวเลข
}อื่น{
setInterval(ฟังก์ชัน(){
document.getElementByIdx_x('totalSecond').innerHTML = --วินาที;
ถ้า (วินาที <= 0) {
window.location = 'b.html';
-
}, 1,000);
-
</สคริปต์>