定时器
setInterval
- 语法: setInterval(函数, 数字)
- 函数: 每次定时器重新执行的时候, 要做的事情(要执行的代码)
- 数字: 当前定时器每个多长时间重新执行一次, 单位是毫秒
setTimeout
- 语法: setTimeout(函数, 数字)
- 函数: 倒计时器执行的时候, 要做的事情(要执行的代码)
- 数字: 当前倒计时器延迟多长时间执行(只会执行一次), 单位是毫秒
当不传递第二个参数的时候, 或者传递的是0的时候
执行速度会按照最快的速度执行
最快的速度一般为 4~20 毫秒, 最快速度与电脑性能有关
所以在书写定时器或者倒计时器的时候, 需要我们指定一个时间, 一般不要不写或者给 0 毫秒
// 1. 定时器
setInterval(function () {
console.log('定时器每次执行的时候, 我就会被打印一次')
}, 1000)
setInterval(function () {
console.log('定时器每次执行的时候, 我就会被打印一次')
}, 0)
setInterval(function () {
console.log('定时器每次执行的时候, 我就会被打印一次')
})
// 2. 倒计时器
setTimeout(function () {
console.log('倒计时器时间到的时候, 我会执行一次')
}, 1000)
setTimeout(function () {
console.log('倒计时器时间到的时候, 我会执行一次')
}, 0)
setTimeout(function () {
console.log('倒计时器时间到的时候, 我会执行一次')
})
定时器的返回值及意义
-
意义:
- 表明当前定时器是这个页面的第几个定时器
-
注意:
- 如果页面的打开方式是利用 liveserver 启动, 那么定时器的ID, 会不太一样
-
作用:
- 能够利用返回值关闭这个定时器
- 关闭语法1:
clearInterval(要关闭的定时器的返回值) - 关闭语法2:
clearTimeout(要关闭的定时器的返回值) - 注意: 关闭语法可以混用, 所以只要关闭定时器, 随便写上边那个都可以
- 但是推荐对应的书写, 目的是为了让别人一眼看出关闭的是定时器还是倒计时器
- 关闭语法1:
- 能够利用返回值关闭这个定时器
// 利用返回值 停止定时器
var timerID = setInterval(function () {
console.log('定时器执行的时候~~~~~~~~~')
}, 1000)
setTimeout(function () {
console.log('倒计时器执行, 停止了上边的定时器')
clearInterval(timerID)
}, 5000)
var timerId = setTimeout(function () {
console.log('3秒钟后我会执行')
}, 3000)
clearTimeout(timerId)
// 查看定时器的返回值
var timerId = setInterval(function () {}, 1000)
console.log(timerId)
var timerId = setTimeout(function () {}, 1000)
console.log(timerId)
JS 的同步异步任务
- JS 是单线程的, 同一时间只能做一件事
- 如果 只有单线程那么可能会遇到一些问题
上述的方案 如果遇到一个中间的代码 耗时很久, 那么后续的所有代码, 都需要等待上边的代码执行完毕后在执行,这种情况给用户的感觉就是非常卡顿
所以为了解决上述的问题, JS 将代码分为两个任务
同步任务
目前所接触到的内容中, 除了两个定时器之外的都是同步任务
异步任务
目前所接触到的内容中, 只有两个定时器算是异步任务, 将来还会有新的异步任务
JS 中代码执行的顺序
- 代码从上往下执行
- 先将代码中所有的同步任务, 全都执行一遍
- 同步任务执行完毕后, 在执行异步任务
- 如果在代码的中间遇到了异步任务, 那么先将异步任务暂存到一个任务队列中, 等待所有的同步任务执行完毕后执
console.log('1. JS开始执行')
setTimeout(function () {
console.log('2. 一个非常耗时的任务执行完毕')
})
console.log('3. JS执行完毕')
