setTimeout()方法和setInterval()方法

setTimeout方法：

定义和用法：

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

tip: 1000 毫秒= 1 秒。

tip: 如果你只想重复执行可以使用setInterval()方法。

tip: 使用 clearTimeout() 方法来阻止函数的执行。

语法：setTimeout(code, milliseconds, param1, param2, ...)

返回值：返回一个 ID（数字），可以将这个ID传递给 clearTimeout() 来取消执行。

实例：

//eg1：三秒后弹出“HELLO”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<p>点击按钮，3 秒后会弹出 "Hello"。</p>
<button onclick="myFunction()">点我</button>

<script>
var myVar;

function myFunction() {
    myVar = setTimeout(alertFunc, 3000);
}

function alertFunc() {
  alert("Hello!");
}
</script>

</body>
</html>
//eg2：第2、4、6秒修改输入框中的文本：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<p>点击按钮，在第 2、4、6 秒修改输入框中的文本：</p>

<button onclick="timedText()">显示时间文本</button>
<input type="text" id="txt">

<script>
function timedText() {
    var x = document.getElementById("txt");
    setTimeout(function(){ x.value="2 秒" }, 2000);
    setTimeout(function(){ x.value="4 秒" }, 4000);
    setTimeout(function(){ x.value="6 秒" }, 6000);
}
</script>

</body>
</html>
//eg3：打开一个新窗口，3 秒后将该窗口关闭
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<p>打开一个新窗口，3 秒后将该窗口关闭:</p>

<button onclick="openWin()">打开 "窗口"</button>

<script>
function openWin() {
    var myWindow = window.open("", "", "width=200, height=100");
    myWindow.document.write("<p>这是一个新窗口'</p>");
    setTimeout(function(){ myWindow.close() }, 3000);
}

</script>

</body>
</html>
//eg4计数器 -- 可以通过点击按钮停止：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<p>点击按钮，等待 3 秒后弹出 "Hello" 。</p>
<p>点击第二个按钮来阻止弹出函数 myFunction 的执行。 (你必须在 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>
//显示当前时间
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body onload="startTime()">

<div id="txt"></div>

<script>
function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    // 在 numbers<10 的数字前加上 0
    m = checkTime(m);
    s = checkTime(s);
    document.getElementById("txt").innerHTML = h + ":" + m + ":" + s;
    var t = setTimeout(function(){ startTime() }, 500);
}

function checkTime(i) {
    if (i < 10) {
        i = "0" + i;
    }
    return i;
}
</script>

</body>
</html>
//eg5传递参数给 alertFunc 函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<p>点击按钮 2 秒后输出 "Hello"。</p>

<p>实例中，我们也会输出传递给 alertFunc() 函数的参数 ( 兼容所有浏览器 )。</p>

<button onclick="myStartFunction()">开始</button>

<p id="demo"></p>

<p id="demo2" style="color:red;"></p>

<script>
var myVar;

function myStartFunction() {
    myVar = setTimeout(function(){ alertFunc("Runoob", "Google"); }, 2000);
}

function alertFunc(param1, param2) {
    document.getElementById("demo").innerHTML += "Hello ";

    document.getElementById("demo2").innerHTML = "传递给 alertFunc() 的参数: <br>" 
    + param1 + "<br>" + param2 + "<br>";
}
</script>

</body>
</html>

setInterval()方法

定义和用法：

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

语法：setInterval(code, milliseconds);

实例：

//显示当前时间( setInterval() 方法会每秒执行一次函数，类似手表功能):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></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>

//使用 setInterval() 和 clearInterval()来创建动态进度条：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
#myProgress {
   100%;
  height: 30px;
  position: relative;
  background-color: #ddd;
}

#myBar {
  background-color: #4CAF50;
   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>

//每 300 毫秒切换背景颜色：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<p>以下实例中，setInterval() 方法每 300 毫秒执行 setColor() 函数 ，该函数可以切换背景颜色。</p>

<button onclick="stopColor()">停止切换</button>

<script>
var myVar = setInterval(function(){ setColor() }, 300);
 
function setColor() {
  var x = document.body;
  x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";
}
 
function stopColor() {
  clearInterval(myVar);
}
</script>

</body>
</html>