setTimeout 和 setInterval

setTimeout 可以让我们过指定时间之后执行一段程序，而 setInterval 可以让我们间隔执行一段程序。

setTimeout 延迟执行

语法如下：

let timerID = setTimeout(func[, delay, arg1, arg2, ...]);

func：要执行的函数。
delay：延迟的时间，毫秒为单位，默认值为
arg：函数的参数。
timerID：定时器的 ID，可以用 clearTimeout 取消执行。

看一个简单的例子：

$$jsdemo$$
$$edit$$
function sayHello() {
    alert("你好~")
}

// 五秒后执行
setTimeout(sayHello, 5000)

以下的例子则是携带了参数：

$$jsdemo$$
$$edit$$
function sayHello(name) {
    alert(`${name}, 你好~`)
}

setTimeout(sayHello, 5000, "鸣人")

不过很多时候不使用这种方法传递参数，而是采用箭头函数再创建一个函数的方法，这样看起来更直观：

$$jsdemo$$
$$edit$$
function sayHello(name) {
    alert(`${name}, 你好~`)
}

// 使用箭头函数携带参数
setTimeout(() => sayHello("鸣人"), 5000)

setInterval 间隔执行

setInterval 与 setTimeout 的语法相同：

let timerID = setTimeout(func[, delay, arg1, arg2, ...]);

setInterval 是每间隔固定的时长会执行一次，打开控制台查看以下代码的输出：

$$jsdemo$$
$$edit$$
function sayHello() {
    console.log("你好~")
}

setInterval(sayHello, 2000)

clearTimeout 取消执行

clearTimeout 可以结束一个调试器的执行，只需提供其返回的 timerID 即可。

以下的延时执行将不会被执行：

$$jsdemo$$
$$edit$$
function sayHello() {
    alert("你好~")
}

// 五秒后执行
let timerID = setTimeout(sayHello, 5000)

// 取消了执行
clearTimeout(timerID)

clearInterval 取消执行

clearInterval 类型，同样可以取消一个调试器的执行。 $$tip 理论上 clearTimeout 用于取消 setTimeout 的执行，clearInterval 用于取消 setInterval 的执行。

实际测试中两者可以互用。 $$

以下代码将会在倒计时 5 秒后停止执行：

$$jsdemo$$
$$edit$$
let counter = 5
function countdown() {
    if (counter == 0) {
        console.log("火箭发射！！！")
        clearTimeout(timerID)
        return
    }
    console.log(counter)
    counter--
}

let timerID = setInterval(countdown, 1000)

练习

完成以下的 printNumbers 函数，使其能间隔一秒打印出 from 至 to（不包含）间的数字。

function printNumbers(from, to) {
    // 补充完成
}

printNumbers(0, 4)
// 0
// 1
// 2
// 3

$$answer 答案一，使用 setTimeout：

$$jsdemo$$
$$edit$$
function printNumbers(from, to) {
    function count(current) {
        if (current < to) {
            console.log(current)
            current++

            setTimeout(() => count(current), 1000)
        }
    }

    setTimeout(() => count(from), 1000)
}

printNumbers(0, 4)
// 0
// 1
// 2
// 3

答案二，使用 setInterval：

$$jsdemo$$
$$edit$$
function printNumbers(from, to) {
    let current = from

    function count() {
        if (current < to) {
            console.log(current)
            current++
        } else {
            clearInterval(timerId)
        }
    }

    const timerId = setInterval(count, 1000)
}

printNumbers(0, 4)
// 0
// 1
// 2
// 3

完成以下倒计时的案例，可以用按钮控制开始或暂停。 $$demo <h1 id="counter"></h1> <button id="btn" onclick="toggle()">开始</button> <script> // 计数的秒数 let counter = 10 let timerId = null

const counterEl = document.getElementById("counter") counterEl.textContent = counter

function count() { counter--
```
 if (counter > 0) {
     counterEl.textContent = counter
 } else {
     counterEl.textContent = "完成"
     clearInterval(timerId)
 }
```
}

function toggle() { if (timerId === null) { timerId = setInterval(count, 1000) document.getElementById("btn").textContent = "暂停" } else { clearInterval(timerId) timerId = null
```
     document.getElementById("btn").textContent = "开始"
 }
```
} </script> $$

$$answer

<h1 id="counter"></h1>
<button id="btn" onclick="toggle()">开始</button>
<script>
    // 计数的秒数
    let counter = 10
    let timerId = null

    const counterEl = document.getElementById("counter")
    counterEl.textContent = counter

    function count() {
        counter--

        if (counter > 0) {
            counterEl.textContent = counter
        } else {
            counterEl.textContent = "完成"
            clearInterval(timerId)
        }
    }

    function toggle() {
        if (timerId === null) {
            timerId = setInterval(count, 1000)
            document.getElementById("btn").textContent = "暂停"
        } else {
            clearInterval(timerId)
            timerId = null

            document.getElementById("btn").textContent = "开始"
        }
    }
</script>