js中的定时器与异步代码

193 阅读2分钟

定时器

1.setInterval:计时器, 每间隔固定的时间执行一次

语法:setInterval(函数,数字/时间)

函数:每间隔固定时间要执行的代码

数字:间隔的时间,注意单位为毫秒,最小值为4~20

var timeId = setInterval(function(){
console.log('我是一个定时器');
},100)//表示每100毫秒执行一次

2.setTimeout:倒计时器,在指定时间到达后,执行一次

语法:setTimeout(函数, 数字)

函数:每间隔固定时间要执行的代码

数字:间隔的时间,注意单位为毫秒

var timeId2 = setTimeout(function(){
console.log('我是一个倒计时器')},1000)//1000毫秒后执行

两个定时器的返回值与意义

返回值(也就是变量名):不区分定时器的种类,用于表示你这个计时器是页面中的第几个

作用:用来关闭定时器

关闭定时器

不区分定时器的种类,只要给出正确的定时器返回值就可以关闭

语法:clearTimeout(定时器的返回值)

注意:能关闭计时器也能关闭倒计时器

开发人员约定:这个定时器只用来关闭倒计时器

目的:是为了让其他开发人员知道这里关闭了一个倒计时器

var timeId2 = setTimeout(function(){
console.log('我是一个倒计时器')},1000)//1000毫秒后执行
clearTimeout(timeId2)

语法2:clearInterval(定时器的返回值)

注意:能关闭计时器也能关闭倒计时器

开发人员约定:这个定时器只用来关闭计时器

目的:是为了让其他开发人员知道这里关闭了一个计时器

var timeId = setInterval(function(){
console.log('我是一个定时器')
},100)//表示每100毫秒执行一次
clearInterval(timeId)

异步代码

什么是非异步代码

按照从上到下的顺序,从左到右的顺序,依次执行每一段代码

如果上一行代码没有执行完毕,不会执行下一行代码

什么是异步代码

当代码遇到异步代码时,会把这个代码放到'异步队列'内等待

所有的同步代码执行完毕后,开始执行'异步队列'

就是说代码在执行时遇到异步任务的时候,会先把这个代码先放到'异步队列'内等待

直到把所有的同步代码执行完毕后,在开始执行异步任务

什么是异步任务

两种定时器都是异步任务

也就是先执行定时器外面的代码,在执行定时器里面的代码

异步代码例子

 console.log(1)
        setTimeout(function
        (){
            console.log(2)
        },3000)
        console.log(3)
        setTimeout(function
        (){
            console.log(4)
        },3000)
        console.log(5)
        setTimeout(function
        (){
            console.log(6)
        },3000)
        console.log(7)
        //此代码的执行过程为1357246