Penjelasan terperinci tentang penggunaan SetInterval dan setTimeout dalam kemahiran JavaScript

setTimeout

Penerangan

setTimeout(kod, milisec)

Kaedah setTimeout() digunakan untuk memanggil fungsi atau ungkapan yang dikira selepas bilangan milisaat yang ditentukan.

Nota: Semasa proses panggilan, anda boleh menggunakan clearTimeout(id_of_settimeout) untuk menamatkan

参数	描述
code	必需，要调用的函数后要执行的 JavaScript 代码串。
millisec	必需，在执行代码前需等待的毫秒数。

setTimeinterval

setInterval(kod,millisec[,"lang"])

参数	描述
code	必需，要调用的函数或要执行的代码串。
millisec	必需，周期性执行或调用code之间的时间间隔，以毫秒计。

Kaedah setInterval() boleh memanggil fungsi atau mengira ungkapan mengikut tempoh yang ditentukan (dalam milisaat).

Tetapkan kelewatan dalam JS:

Menggunakan SetInterval sangat serupa dengan menetapkan fungsi tunda setTimeout. setTimeout digunakan untuk menangguhkan tempoh masa sebelum melakukan operasi.

setTimeout("fungsi",masa) menetapkan objek tamat masa setInterval("fungsi",masa) menetapkan objek tamat masa

SetInterval diulang secara automatik, dan setTimeout tidak akan berulang.

clearTimeout(objek) mengosongkan objek setTimeout clearInterval(objek) mengosongkan objek setInterval

Kaedah setInterval() boleh memanggil fungsi atau mengira ungkapan mengikut tempoh yang ditentukan (dalam milisaat).

Gunakan pemasa untuk melaksanakan pelaksanaan JavaScript yang tertunda atau berulang Objek tetingkap menyediakan dua kaedah untuk mencapai kesan pemasa, iaitu window.setTimeout() dan window.setInterval. Yang pertama boleh membuat sekeping kod dijalankan selepas masa yang ditentukan manakala yang terakhir boleh membuat sekeping kod dijalankan sekali setiap masa yang ditentukan. Prototaip mereka adalah seperti berikut: window.setTimeout(expression,milliseconds); window.setInterval(ungkapan,milisaat); masa dicapai, sistem akan Fungsi akan dipanggil secara automatik Apabila menggunakan nama fungsi sebagai pemegang panggilan, ia tidak boleh mengambil sebarang parameter apabila menggunakan rentetan, anda boleh menulis parameter yang akan dihantar di dalamnya. Parameter kedua bagi kedua-dua kaedah ialah milisaat, yang mewakili bilangan milisaat untuk kelewatan atau pelaksanaan berulang.

Kedua-dua kaedah ini diperkenalkan di bawah.

1． kaedah window.setTimeout Kaedah ini boleh menangguhkan pelaksanaan fungsi, contohnya:

<script language="JavaScript" type="text/javascript">
<!--
 function hello(){ alert("hello"); } window.setTimeout(hello,5000);
//-->
 </script>

Salin selepas log masuk

Kod ini akan menyebabkan kotak dialog "hello" dipaparkan 5 saat selepas halaman dibuka. Ayat terakhir juga boleh ditulis sebagai: window.setTimeout("hello()",5000); Jika anda membatalkan pelaksanaan tertunda sebelum tempoh kelewatan dicapai, anda boleh menggunakan kaedah window.clearTimeout(timeoutId), yang menerima id yang mewakili pemasa. Id ini dikembalikan dengan kaedah setTimeout, contohnya:

<script language="JavaScript" type="text/javascript">
<!--
function hello(){   
alert("hello");
}
var id=window.setTimeout(hello,5000);
document.onclick=function(){   
window.clearTimeout(id);
 }
//-->
</script>

Salin selepas log masuk

Dengan cara ini, jika anda ingin membatalkan paparan, anda hanya perlu mengklik mana-mana bahagian halaman dan kaedah window.clearTimeout akan dilaksanakan, supaya operasi tamat masa akan dibatalkan.

2． window.setInterval kaedah Kaedah ini menyebabkan fungsi dipanggil setiap masa tetap dan merupakan kaedah yang sangat biasa. Jika anda ingin membatalkan pelaksanaan berjadual, sama seperti kaedah clearTimeout, anda boleh memanggil kaedah window.clearInterval. Kaedah clearInterval juga menerima nilai yang dikembalikan oleh kaedah setInterval sebagai parameter. Contohnya: //Tentukan panggilan untuk dilaksanakan berulang kali var id=window.setInterval("somefunction",10000); //Cancel scheduled execution window.clearInterval(id); pelaksanaan berjadual. Malah, kaedah setInterval perlu digunakan pada banyak masa Di bawah kami akan mereka bentuk jam randik untuk memperkenalkan penggunaan fungsi setInterval: jam randik akan menyertakan dua butang dan kotak teks untuk memaparkan masa. Apabila butang mula diklik, masa bermula Unit minimum ialah 0.01 saat mengklik butang sekali lagi akan menghentikan masa, dan kotak teks memaparkan masa berlalu. Butang lain digunakan untuk menetapkan semula masa semasa kepada sifar. Kod pelaksanaan adalah seperti berikut:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head>
 <title> New Document </title>
 </head> 
<body> 
<form action="somepage.asp"> 
<input type="text" value="0" name="txt1"/> 
<input type="button" value="开始" name="btnStart"/> 
<input type="button" value="重置" name="btnReset"/> 
</form> 
</body> 
</html>

<script language="JavaScript" type="text/javascript">
<!--
//获取表单中的表单域
var txt=document.forms[0].elements["txt1"];
 var btnStart=document.forms[0].elements["btnStart"];
 var btnReset=document.forms[0].elements["btnReset"]
 //定义定时器的id
var id;
//每10毫秒该值增加1
var seed=0;
btnStart.onclick=function(){   
//根据按钮文本来判断当前操作   
 if(this.value=="开始"){       
 //使按钮文本变为停止       
 this.value="停止";       
//使重置按钮不可用       
 btnReset.disabled=true;       
//设置定时器，每0.01s跳一次       
id=window.setInterval(tip,10);    }
else{       
//使按钮文本变为开始       
this.value="开始";       
//使重置按钮可用       
 btnReset.disabled=false;       
//取消定时       
window.clearInterval(id);   
 } }
//重置按钮
btnReset.onclick=function(){   
seed=0;
 }
//让秒表跳一格
 function tip(){  
  seed++;   
 txt.value=seed/100;
}
//-->
</script>

Salin selepas log masuk

Melalukan parameter kepada panggilan pemasa, sama ada window.setTimeout atau window.setInterval, tidak boleh mengambil parameter apabila menggunakan nama fungsi sebagai pemegang panggilan Dalam banyak kes, parameter mesti diambil, yang memerlukan penyelesaian. Contohnya, untuk fungsi hello(_name), ia digunakan untuk memaparkan mesej alu-aluan untuk nama pengguna: var userName="jack";

//根据用户名显示欢迎信息
function hello(_name){   
 alert("hello,"+_name);
 }

Salin selepas log masuk

Pada masa ini, adalah tidak mungkin untuk menggunakan pernyataan berikut untuk menangguhkan pelaksanaan fungsi helo selama 3 saat:

window.setTimeout(hello(Nama pengguna),3000);

Ini akan menyebabkan fungsi hello dilaksanakan serta-merta dan menghantar nilai pulangan sebagai pemegang panggilan kepada fungsi setTimeout Hasilnya bukan apa yang diperlukan oleh program. Anda boleh mencapai hasil yang diingini dengan menggunakan bentuk rentetan:

window.setTimeout("hello(Nama pengguna)",3000);

Rentetan di sini ialah sekeping kod JavaScript, dengan nama pengguna mewakili pembolehubah. Walau bagaimanapun, cara penulisan ini tidak cukup intuitif, dan dalam beberapa kes, nama fungsi mesti digunakan. Berikut adalah helah kecil untuk memanggil fungsi dengan parameter:

<script language="JavaScript" type="text/javascript"> <!-- var userName="jack";
//根据用户名显示欢迎信息
function hello(_name){    
alert("hello,"+_name);
}
//创建一个函数，用于返回一个无参数函数
function _hello(_name){    
return function(){       
hello(_name);    } }
window.setTimeout(_hello(userName),3000);
 //-->
</script>

Salin selepas log masuk

这里定义了一个函数_hello，用于接收一个参数，并返回一个不带参数的函数，在这个函数内部使用了外部函数的参数，从而对其调用，不需要使用参数。在window.setTimeout函数中，使用_hello(userName)来返回一个不带参数的函数句柄，从而实现了参数传递的功能。

window对象有两个主要的定时方法，分别是setTimeout 和 setInteval 他们的语法基本上相同，但是完成的功能取有区别。

　　setTimeout方法是定时程序，也就是在什么时间以后干什么。干完了就拉倒。

　　setInterval方法则是表示间隔一定时间反复执行某操作。

　　JS里设定延时：

使用SetInterval和设定延时函数setTimeout 很类似。setTimeout 运用在延迟一段时间，再进行某项操作。

setTimeout("function",time) 设置一个超时对象

setInterval("function",time) 设置一个超时对象

SetInterval为自动重复，setTimeout不会重复。

clearTimeout(对象) 清除已设置的setTimeout对象

clearInterval(对象) 清除已设置的setInterval对象

如果用setTimeout实现setInerval的功能，就需要在执行的程序中再定时调用自己才行。如果要清除计数器需要根据使用的方法不同，调用不同的清除方法：

例如：

tttt=setTimeout('northsnow()',1000);
clearTimeout(tttt);

Salin selepas log masuk

或者：

tttt=setInterval('northsnow()',1000);
clearInteval(tttt);

Salin selepas log masuk

举一个例子：

<div id="liujincai">
</div>
<input type="button" name="start" value="start" onclick='startShow();'>
<input type="button" name="stop" value="stop" onclick="stop();">
<script language="javascript">  
var intvalue=1;  
var timer2=null;  
function startShow()  {   
 liujincai.innerHTML=liujincai.innerHTML + " " + (intvalue ++).toString();   
timer2=window.setTimeout("startShow()",2000);  }  
function stop()  {   
 window.clearTimeout(timer2);  
 }
</script>

Salin selepas log masuk

或者：

<div id="liujincai">
</div>
<input type="button" name="start" value="start" onclick='timer2=window.setInterval("startShow()",2000);//startShow();'>
<input type="button" name="stop" value="stop" onclick="stop();">
<script language="javascript">  
 var intvalue=1;  
var timer2=null;  
 function startShow()  {   
 liujincai.innerHTML=liujincai.innerHTML + " " + (intvalue ++).toString();  
 }  
 function stop()  {   
 window.clearInterval(timer2);  
}
</script>

Salin selepas log masuk

以上内容是小编给大家介绍的关于JavaScript中SetInterval与setTimeout的用法详解，希望对大家学习SetInterval与setTimeout的相关知识有所帮助。