定時和取消定時：
setInterval() 方法、clearInterval() 方法、 setTimeout() 方法、clearTimeout() 方法
一.setInterval與setTimeout的區別
setInterval
setInterval()方法可按照指定的週期來調用函數或者計算表達式（以毫秒爲單位）
語法：
setInterval(函數表達式, 毫秒數);
setInterval(function, 函數表達式, param1, param2, ...)
setInterval()會不停的調用函數，直到clearInterval()被調用或者窗口被關閉，由 setInterval()返回的ID值可用作clearInterval()方法的參數。
setTimeout
setTimeout()方法用於在指定毫秒數後再調用函數或者計算表達式（以毫秒爲單位）
語法：
setTimeout(函數表達式，毫秒數)；
setTimeout()只執行函數一次，如果需要多次調用可以使用setInterval(),或者在函數體內再次調用setTimeout()
區別
通過以上分析可以看出，setTimeout與setInterval的主要區別是:
setTimeout()方法只運行一次，也就是說當達到設定的時間後就出發運行指定的代碼，運行完後就結束了，如果還想再次執行同樣的函數，可以在函數體內再次調用setTimeout()，可以達到循環調用的效果。
setInterval()是循環執行的，即每達到指定的時間間隔就執行相應的函數或者表達式，是真正的定時器。
二、setInterval()和setTimeout()的用法
先寫個最簡單的demo，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script>
setTimeout("alert('hello')",2000);
//setInterval("alert('hello')",2000);
</script>
</head>
<body>
</body>
</html>
setTimeout:頁面會在停留2秒之後彈出對話框,注意setTimeout不會自動重複執行！
setInterval:會每兩秒中彈出對話框。
當然，setInterval和setTimeout也可以執行function，也都可以不斷重複執行！
三.clearTimeout()、clearInterval()
要使用clearTimeout()，需要我們設定setTimeout()時， 給予這setTimeout()一個名稱, 這名稱就是timeoutID ，我們叫停時，就是用這 timeoutID 來叫停。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script>
var timeId= setTimeout("alert('hello')",2000);
clearTimeout(timeId);
</script>
</head>
<body>
</body>
</html>
原計劃1秒後彈出的警示框，被自然叫停了。
使用 setInterval() 和 clearInterval()來創建動態進度條：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<style>
#myProgress {
width: 100%;
height: 30px;
position: relative;
background-color: #ddd;
}
#myBar {
background-color: #4CAF50;
width: 10px;
height: 30px;
position: absolute;
}
</style>
<body>
<h1>JavaScript 進度條</h1>
<div id="myProgress">
<div id="myBar"></div>
</div>
<br>
<button onclick="move()">點我</button>
<script>
function move() {
var elem = document.getElementById("myBar");
var width = 0;
var id = setInterval(frame, 10);
function frame() {
if (width == 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
</script>
</body>
</html>