定时器
用于设置延时
- setTimeout/clearTimeout
- 指定某个函数或代码在多少毫秒之后执行
- 返回一个整数,表示定时器的编号,以后可以用来取消这个定时器
function sayHello(){
console.log('hello')}
let timer1 = setTimeout(sayHello,1000)
clearTimeout(timer1)
let timer2 = setTimeout(()=>{
console.log('helloworld')},2000)
用于设置间隔
- setInterval/clearInterval
- 指定某个函数或代码在每间隔多少毫秒执行一次
- 返回一个整数,表示定时器的编号,以后可以用来取消这个定时器
function sayHello(){
console.log('hello')}
let timer1 = setInterval(sayHello,1000)
clearInterval(timer1)//停止设置的间隔运行
let timer2=setInterval(()=>{console.log('helloworld')},2000)//写成一行
js的单线程
众所周知,js是一个单线程的语言.那么什么是单线程呢?单线程即在处理多个任务时,需要按照顺序一件一件的来.上一个任务执行完成后再执行下一个任务.
比如下面这个例子
const useTime = t => {
let start = Date.now()
while(Date.now() - start < t) {}
console.log(3)
}
function fn1(){
console.log(1)
}
function fn2(){
console.log(2)
}
fn1()
useTime(2000)//2000ms后输出3
fn2()
同步任务和异步任务
- 就如上面这个例子,前一个2000ms的任务执行完,才能继续执行下一个任务,但是,如果前一个任务的执行时间很长,那么下一个任务就必须要等着.给用户带来很差的体验.
- 因此,js可以先挂起耗时较长的任务,先运行接下来的任务,等耗时较长的任务执行完成后,再回头执行.所以js又分为
同步任务
和异步任务
同步任务
- 同步任务是指在主线程上排队执行的任务,只有前一个任务执行完毕,才能继续执行下一个任务,当我们打开网站时,网站的渲染过程,比如元素的渲染,其实就是一个同步任务
异步任务
- 异步任务是指不进入主线程,而进入任务队列的任务,只有任务队列通知主线程,某个异步任务可以执行了,该任务才会进入主线程,当我们打开网站时,像图片的加载,音乐的加载,其实就是一个异步任务
js的任务队列
- 异步操作会将相关回调添加到任务队列中。而不同的异步操作添加到任务队列的时机也不同,如
onclick
,setTimeout
,ajax
处理的方式都不同,这些异步操作是由浏览器内核的webcore来执行的,webcore包含下图中的3种 webAPI,分别是DOM Binding、network、timer模块。
js的事件循环
- 单线程从从任务队列中读取任务是不断循环的,每次栈被清空后,都会在任务队列中读取新的任务,如果没有任务,就会等到,直到有新的任务,这就叫做任务循环
- 因为每个任务都是由一个事件触发的,因此也叫作事件循环
js的主线程
- JS 只有一个线程,称之为主线程。
- 所有同步任务都在主线程上执行,行成一个执行栈
- 主线程之外,还存在一个任务队列,只要异步任务有了结果,就会在任务队列中放置一个事件
- 一旦执行栈中的所有同步任务执行完毕,系统就会读取任务队列,看看里面还有哪些事件,那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行
- 主线程不断的重复上面的这一步