1. JavaScript 基础

  2. 深入数据和类型

  3. 函数进阶

  4. 运算符

  5. 浏览器存储

  6. Document

  7. Web API

  8. 事件

  9. 工具与规范

  10. 实例

  11. 练习

setTimeout 和 setInterval

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

setTimeout 延迟执行

语法如下:

let timerID = setTimeout(func[, delay, arg1, arg2, ...]);
  • func:要执行的函数。
  • dalay:延迟的时间,毫秒为单位,默认值为
  • 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 间隔执行

setIntervalsetTimeout 的语法相同:

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)

以下代码将会在倒计时 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)