js
中的計時器事件
js
在js中,通常會有一些事件,我們需要讓它
間隔一段時間
之後再發生,或者
每隔一段時間
發生一次,那就需要用到我們
js
中的
計時事件
計時事件
主要有兩種:
-
---- 間隔一定的時間之後執行setTimeout()
-
----每間隔一定的時間執行一次(重複性執行)setInterval()
setTimeout()
間隔一定的時間之後`執行指定的語句或函數。
例如:3s後跳轉到前一個頁面。
<script type="text/javascript">
setTimeout(function(){
window.history.back();
},3000);
</script>
也可以采用調用函數的方式
function fn1(){
console.log("你好");
}
setTimeout(fn1,3000);
需要注意的是,我們在上述代碼中調用函數時調用的整個函數體,而不是函數執行後的結果
fn1()
setInterval()
每隔一段時間
執行一次指定的語句或函數,是個重複性的操作。
執行個體1:每隔3s列印一次“hello”
<script type="text/javascript">
setTimeout(function(){
console.log("hello");
},3000);
</script>
執行個體2:顯示目前時間,通過按鈕實作時間的停止,開始
<body>
<h4 id="demo"></h4>
<input type="button" onclick="startTimer()" value="開始">
<input type="button" onclick="stopTimer()" value="停止">
</body>
<script type="text/javascript">
var myVar;
function startTimer(){
/*setInterval() 間隔指定的毫秒數不停地執行指定的代碼*/
myVar=setInterval(function(){myTimer()},1000);
}
function myTimer()/* 定義一個得到本地時間的函數*/
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
function stopTimer()
{/* clearInterval() 方法用于停止 setInterval() 方法執行的函數代碼*/
clearInterval(myVar);
}
</script>
如何執行停止呢?
clearInterval() 方法用于停止 setInterval() 方法執行的函數代碼.
clearTimeout() 方法用于停止執行setTimeout()方法的函數代碼。
這裡注意myVar必須是一個全局變量。執行個體如下:
var myVar;
function myFunction()
{
myVar=setTimeout(function(){alert("Hello")},3000);
}
function myStopFunction()
{
clearTimeout(myVar);
}
