JS基础（九）定时器

• • JS中的定时器&&动画&&同步异步编程
    • 定时器
    • JS中动画实现的原理
    • JS中的同步编程和异步编程

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

定时器

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

window.setTimeout（执行一次）

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

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

[function]:到达时间要执行的方法
[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、等待任务队列：异步执行任务