Acara pemasaan JavaScript


Dengan menggunakan JavaScript, kami mempunyai keupayaan untuk melaksanakan kod selepas selang masa yang ditetapkan, bukannya sejurus selepas fungsi dipanggil. Kami memanggil ini acara masa.

Adalah sangat mudah untuk menggunakan peristiwa pemasaan dalam JavaScript Dua kaedah utama ialah:

  • setInterval() - laksanakan fungsi yang ditentukan secara berterusan pada bilangan milisaat yang ditetapkan. kod.

  • setTimeout() - Laksanakan kod yang ditentukan selepas menjeda untuk bilangan milisaat yang ditentukan

Nota: setInterval( ) dan setTimeout() ialah dua kaedah bagi objek HTML DOM Window.

kaedah setInterval()

setInterval() melaksanakan kod yang ditentukan secara berterusan untuk bilangan milisaat yang ditetapkan

Sintaks

window.setInterval("fungsi javascript",milisaat);

window.setInterval() kaedah tidak perlu digunakan awalan tetingkap , gunakan fungsi setInterval() secara langsung.

setInterval() Parameter pertama ialah fungsi.

Bilangan milisaat antara saat

Nota: 1000 milisaat ialah satu saat.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>单击按钮每3秒出现一个“Hello”警告框。</p>
<p>再次点击警告框，经过3秒出现新的警告框，这将一直执行 ...</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	setInterval(function(){alert("Hello")},3000);
}
</script>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Contoh menunjukkan cara menggunakan kaedah setInterval(), tetapi muncul setiap tiga saat tidak baik untuk pengalaman pengguna.

Contoh berikut akan memaparkan masa semasa. Kaedah setInterval() menetapkan kod untuk dilaksanakan setiap saat, sama seperti jam tangan.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>在页面显示一个时钟</p>
<p id="demo"></p>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
	var d=new Date();
	var t=d.toLocaleTimeString();
	document.getElementById("demo").innerHTML=t;
}
</script>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Bagaimana untuk menghentikan pelaksanaan?

Kaedah clearInterval() digunakan untuk menghentikan kod fungsi pelaksanaan kaedah setInterval().

Tatabahasa

window.clearInterval(intervalVariable)

window.clearInterval() kaedah tidak boleh menggunakan awalan tetingkap, terus gunakan fungsi clearInterval() .

Untuk menggunakan kaedah clearInterval(), anda mesti menggunakan pembolehubah global semasa mencipta kaedah pemasaan:

myVar=setInterval("fungsi javascript",milisaat);

Kemudian anda boleh menggunakan kaedah clearInterval() untuk menghentikan pelaksanaan.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>页面上显示时钟：</p>
<p id="demo"></p>
<button onclick="myStopFunction()">停止时钟</button>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
	var d=new Date();
	var t=d.toLocaleTimeString();
	document.getElementById("demo").innerHTML=t;
}
function myStopFunction(){
	clearInterval(myVar);
}
</script>

</body>
</html>

Run instance »

Klik butang "Run Instance" untuk melihat instance dalam talian

kaedah setTimeout()

Sintaks

window.setTimeout("fungsi javascript",Millisaat);

kaedah setTimeout() akan mengembalikan nilai tertentu. Dalam pernyataan di atas, nilai disimpan dalam pembolehubah bernama t. Jika anda ingin membatalkan setTimeout(), anda boleh menentukannya menggunakan nama pembolehubah ini.

Parameter pertama setTimeout() ialah rentetan yang mengandungi pernyataan JavaScript. Ini mungkin pernyataan seperti "alert('5 seconds!')", atau panggilan ke fungsi seperti alertMsg()".

Parameter kedua menunjukkan berapa milisaat dari masa semasa yang pertama parameter akan dilaksanakan.

Klik. Butang "Jalankan contoh" untuk melihat contoh dalam talian

Bagaimana untuk menghentikan pelaksanaan? kod fungsi kaedah setTimeout()

Syntax

window.clearTimeout(timeoutVariable

)

kaedah window.clearTimeout()

boleh digunakan tanpa awalan tetingkap .

Untuk menggunakan kaedah clearTimeout(), anda mesti menggunakan pembolehubah global dalam kaedah tamat masa penciptaan (setTimeout):

myVar=setTimeout("
fungsi javascript ",milisaat
);

Jika fungsi belum dilaksanakan lagi, anda boleh menggunakan kaedah clearTimeout() untuk berhenti melaksanakan kod fungsi.

Contoh 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>点击按钮，在等待 3 秒后弹出 "Hello"。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	setTimeout(function(){alert("Hello")},3000);
}
</script>

</body>
</html>
Jalankan Instance»Klik " Butang Run Instance" untuk melihat contoh dalam talian

Lagi Contoh

Satu Lagi Masa Mudah
Contoh

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>点击第一个按钮等待3秒后出现"Hello"弹框。</p>
<p>点击第二个按钮来阻止第一个函数运行。（你必须在3秒之前点击它）。</p>
<button onclick="myFunction()">点我</button>
<button onclick="myStopFunction()">停止弹框</button>
<script>
var myVar;
function myFunction(){
	myVar=setTimeout(function(){alert("Hello")},3000);
}
function myStopFunction(){
	clearTimeout(myVar);
}
</script>

</body>
</html>
Contoh Berjalan»

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

←
→