JavaScript定時器

時間 2021-08-13

標籤 php html 安全網絡 ide 函數學習 spa 3d 欄目 JavaScript 简体版

原文原文鏈接

一、設置定時器
定時器，適用於定時執行的任務中。在BOM的window對象中，有這樣的兩個函數是用於設置定時器php

setTimeout(function,delay);//設置延時多少毫秒執行該函數，只執行一次，返回值是一個id
setInterval(function,delay);//設置間隔多少毫米一直執行該函數，執行屢次，返回值是一個id

二者的區別就在於setTimeout方式只執行一次，而setInterval理論能夠執行無數次，直到其被取消。html

二、取消定時器
上面說過，在開啓定時器會返回一個id，這個id是用來區別開啓的多個定時器。當咱們要取消定時器時，能夠使用一下這兩個方法。安全

clearTimeout(id);取消由setTimeout方式開啓的定時器
clearInterval(id);取消由setInterval方式開啓的定時器網絡

三、循環調用setTimeout
在使用中，能夠用setTimeout方式來實現setInterval的效果，其實這個讓我想起了當初學Android是的Handler機制，發一個延時消息，而後在內容中再發出消息。例如：ide

<script> var t = 1; function time(){ console.log(t++); window.setTimeout('time()',1000); } window.setTimeout('time()',1000); </script>

四、倒計時案例
在頁面上有一個按鈕，顯示的是倒計時的數字，每隔一秒修改數字，等到0秒時，就切換爆炸圖片。函數

效果圖

學習

代碼ui

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<body>
    <h1>炸彈效果</h1>
    <input type="button" value="5" /><br/>
    <img src="warn.jpg"/>
</body>
<script> //定時執行 function time(){ var input = document.getElementsByTagName('input')[0];//獲取按鈕中的數字 var time = parseInt(input.value) - 1; input.value = time; //爆炸操做 if(time <= 0){ var img = document.getElementsByTagName('img')[0]; img.src = 'boom.jpg';//切換爆照圖片 clearInterval(t1);//清除定時器 } } var t1 = window.setInterval('time()',1000);//開啓定時器 </script>
</html>