JS基础(九)定时器

JS中的定时器&&动画&&同步异步编程

定时器

设置一个定时器并设定一个等待时间,当到达时间,执行指定要完成的事情;JS中的定时器一共有两种:

window.setTimeout(执行一次)

window.setTimeout(function,[interval]):设置了一个定时器,当到达指定时间后执行对应的方法(执行一次定时器就结束了);(第一个参数是函数,第二个参数是时间,a单位都是毫秒,自己不需要加单位,17是个比较理想的时间)

window.setTimeout(function(){
console.log('ok');//100ms后输出一次 ‘ok',此时定时器结束,但是定时器并没有被清除;
},100);//定时器等待时间设置为0也不是立马执行,浏览器也有一个最小反应时间(13MS-14ms),

[interval]:时间因子,需要等待的时间

window.setInterval(执行多次)

window.setInterval(function,[interval]):设置一个定时器,当达到指定时间后执行对应的方法(以后每隔这么长时间就重新执行这个方法,直到定时器清除为止,执行很多次)

var n=0
window.setInterval(function(){
console.log(n++);//每隔100ms输出一次 ,1,2,3,4。。。。
},100);//定时器等待时间设置为0也不是立马执行,浏览器也有一个最小反应时间(13MS-14ms),

定时器的返回值

定时器的返回值,不管是setTimeout还是setInterval都会有一个数字类型的返回值,代表当前是在浏览器中设置的第几个定时器(返回的是定时器的序号)

setTimeout和setInterval虽然是处理不同需求的定时器,但是都是浏览器的定时器,所以设置的时候,返回的序号是依次排序
setInterval:设置完成时定时器会有一个返回值,不管执行多少次,这个代表序号的的返回值不变(设置定时器就会有返回值,执行多少次是定时器的处理

定时器的清除

定时器都需要手动清除,下面两个清除的方法没有区别

clearTimeout([定时器排队的序号])
clearIterval([定时器的排队序号])

当方法执行完成后,我们清除定时器即可 eg: clearTimeout(1) ,这相当于在浏览器中将第一个定时器清除了。
同时我们还需要将之前存储序号的变量赋值为null,例如t1=null,优化JS的内存空间

var timer1=setInterval(function(){

},192);//timer1=1,是该定时器的返回值(即该定时器序号)

var n=0
var timer2=setTimeout(function(){
n++;console.log(n);
if(n>=10){
clearSetInterval(timer2);//手动清除
}
},192);//timer2=2,是该定时器的返回值

定时器的原理

当我们在JS中创建一个定时器后,浏览器会把计时执行方法的这个任务放在浏览器的等待任务队列(等待任务池)中,并且安排一个监控者(属于浏览器开辟的新线程),也就是记录当前已经走的时间,到达时间后,监控者会通知浏览器时间到了,浏览器(在把主任务队列的内容执行完后)会把之前放在等待任务队列中的方法拿出来执行;

JS中动画实现的原理

浏览器实现动画有三种常用发方法
CSS动画
在CSS3中提供了transtation动画animation动画两种动画,优势在于性能好,实现简单,(一般能用css写的绝不用其他方式),弊端在于不兼容IE或其他低版本浏览器(移动端的动画一般都是基于css来完成的)
JS中的动画
在JS中实现动画常用的有:
=>使用定时器驱动的动画
=>使用requestAnimationFrame来完成动画
而所谓的CANVAS动画基本上也是基于站两种方式完成的(CANVAS本身是绘图)
FLASH动画
早期实现动画的方法,现在一些简单的DOM动画都告别了FLASH时代

基于定时器的动画

基于定时器实现的动画的两种解决方案
- 固定步长的动画
- 固定时间的动画(比较常用)
我们最好封装一个方法,支持固定时间的多方向的匀速或飞匀速运动

如何实现多方向匀速

回调函数(callBack)

把一个函数当做实参传递给另一个函数,在另外一个函数中执行这个函数,这种处理机制叫做回调函数

function fn(callBack) {
//=>callBack:传递进来的匿名函数
callBack();
}
fn(function () {
console.log('ok');
});

凡是在当前方法执行的某个阶段,执行一个不确定的事情,我们可以将这件事情当做参数

JS中的同步编程和异步编程

JS是单线程的(一次只能执行一个任务,当前任务没有完成,下面的任务是不进行处理的)
同步编程(sync):当前任务是按照顺序一件件完成的,当前任务没有完成,下面的任务不进行处理
异步编程(async):当前任务在等待执行的时候,我们不去执行,继续完成下面的任务,当下面的任务完成后,也到达的等待的时间了,才去完成当前的任务

  • 定时器都是异步编程的
    -所有的事件绑定也是异步的
    -AJAX中有异步编程
    -有些人把回调函数当做异步编程
    其余都是同步编程
var startTime=new Date();//获取开始的时间
for (var i = 0; i < 1000; i++) {
if(1===99){
console.log(i);
}
}
console.log(new date -startTime);//计算完成循环的时间

在项目中,要避免出现死循环,因为循环时同步编程,当前循环无法结束证明任务没有完成,后续任务无法进行

var n = 0;//第一件任务:创建一个变量
// 第二件任务:创建一个定时器(等待任务,1000MS执行方法是一个等待执行的任务)
setTimeout(function () {
n++;
console.log(n);//再输出n=1
}, 1000);
//第三件任务:输出0
console.log(n); //首先输出n=0;

同步异步编程的核心原理

JS中有两个任务队列(存放任务列表的空间)

1、主任务队列:同步执行任务(从上到下依次执行)
2、等待任务队列:异步执行任务

坚持原创技术分享,您的支持将鼓励我继续创作!