定时器&&Math对象

Math对象

Math是JS内置的对象（JS语言已经封装好了的一个对象）

console.log(Math,typeof Math);
        //用typeof检测出来的结果是"object"，Math是一个对象

• JS内置的函数 Number Boolean isNaN...
Number函数 ==>能够把其他js的数据类型转成数字类型
  Boolean函数 ==>能够把js的其他数据类型转换成布尔值
  isNaN函数 ==>这个函数可以判断一个数字是不是NaN
• JS内置的对象 Math console...
Math对象 ==> 一般用来执行js中的数学运算
  console 对象 ==>是在控制台中输出，一般用来调试程序的

Math.PI 圆周率/π（圆周率:3.1415926）

console.log(Math.PI);

Math.random() 获取随机数字 [0,1)

随机数字的范围是0-1，每次函数执行是不固定的是随机的

[0,1)区间（能取到0但是不能取到1）区间

console.log(Math.random());

Math.min(实参1,实参2...)获取实参集合中最小的数字（如果不是数字类型则隐式类型转换成数字类型）可以传递多个实参

console.log(Math.min(1,false,3,true,4));

Math.max(实参1,实参2...)获取实参集合中最大的数字 （如果不是数字类型则隐式类型转换成数字类型）可以传递多个实参

console.log(Math.max(3,"10",null,-1))

Math.ceil(2.234342) ==> 3 向上取整（如果小数点后面有小数就会往在个位数加一，除0以外）

console.log(Math.ceil(2000.1));

Math.floor(2.234342) ==> 2 向下取整（如果小数点后面有小数不管是几，都会舍弃小数点后面的小数）

console.log(Math.floor(200.9));

Math.round(2.234342) ==> 2 四舍五入

console.log(Math.round(2.56));

如果尾数的最高位数字是4或者比4小，就把尾数去掉。如果尾数的最高位数是5或者比5大，就把尾数舍去并且在它的前一位进"1"

如何计算x的正弦值、余弦值、正切值？？？

正弦值

余弦值

正切值

数学中sin(π/6) ==> 1/2，sin(30°)—>1/2

那么如何在JS中表示正弦值30°

JS中求正弦值Math.sin()

Math.sin(x)弧度值 计算x的正弦值（Math.PI 这个圆周率/π --> π角度值是180°）***

console.log(Math.sin(Math.PI/6))//JS是这样表示弧度值的

Math.cos(x) 计算x的余弦值

console.log(Math.cos(Math.PI/3))//余弦值得60°

Math.tan(x) 计算x的正切值

console.log(Math.tan(Math.PI/4));

Math.abs(数字) 求一个数字的绝对值（abs是absolute简称）

console.log(Math.abs(-10));

若一个数为正数，绝对值就是它本身 2–>2
若一个数为负数，绝对值是它的相反数 -2–>2

Math.pow(x,y) 求x的y次方

 console.log(Math.pow(2,3));

次方最基本的定义是：设a为某数，n为正整数，a的n次方表示为aⁿ，表示n个a连乘所得之结果，如2⁴=2×2×2×2=16。

Math.sqrt(x) 求x的平方根

console.log(Math.sqrt(4));

数学上指一数自乘，刚好等于某数，则此数即为某数的平方根，也就是将某数开平方所得的数。如4的平方根为±2，9的平方根为±3。也称为「二乘根」、「二次根」。

定时器的分类

定时器的作用：每隔一段时间执行对应的代码

JS有两类定时器（定时器是在window上的）

1. setTimeout 延迟定时器(回调函数执行一次)
2. setInterval 循环定时器(回调函数执行无数次)

延迟定时器和循环定时器谁先执行

如果循环定时器和延迟定时器的毫秒数相同那么谁在前就会先执行谁，如果谁的毫秒的少那么也会先执行谁

setTimeout 延迟定时器(回调函数执行一次)

setTimeout(function(){
           console.log('函数执行');
       },3000)//三秒钟之后执行函数中的JS代码
       //这是一个回调函数是匿名函数
       //（函数当做实参传递去那么这个函数是回调函数）

setInterval 循环定时器(回调函数执行无数次)

setInterval(function(){
           console.log('函数执行')//匿名函数
       },1000)

第三个值和后面的值是传递回调函数的实参

setInterval(function(a,b){
          console.log('函数执行')
          console.log(a,b);
       },3000,'我是形参a',2)

第一个值传递的是参数（实参），第二个值传递的是秒数（1000毫秒=1秒），第三个值传递的是回调函数接受的实参以后的值都是接受回调函数的实参地

只要是函数内部都有this指向的，那么这个回调函数的this指向是谁？

 setInterval(function(){
           console.log(this);
       }, 1000)//指向window

定时器的回调函数中 this指向window

另一种写法（函数名）

setInterval( auto,1000);//第一个值用函数声明的名字来接收
        function auto(){
            console.log('另一种写法');
        }//其他的正常写

把函数声明来出来，在用函数声明的名字填到定时器第一个值中

还可以通过字符串方法来用计时器（几乎不常用）

setInterval('console.log([1,2,3])',1000);

如果第一个参数是字符串，那么JS会把这个字符串当做正常的代码来指执行的

关闭定时器

 setInterval(function(){
            console.log(1);
        },200)//这是一个循环定时器，
        //循环定时器每隔0.2秒执行一次回调函数

如果定时器加载过大那么，如何关闭定时器？？？

那么函数加括号执行是有一个结果的，那我们用timer变量给你接收

var timer = setInterval(function(){
            // console.log(1);//先不打印
        },1000);
        console.log(timer)

那为什么没有打印任何的数据，为什么还会出现数字1呢？

可以理解为点前JS是有一个定时器的

那么如何把这个定时器清除掉？？？ 对应的定时器，要用对应的清楚定时器的方法

清楚定时器的方法（每使用一回定时器就需要清除一定时器）

1. clearInterval() 清除循环定时器
2. clearTimeout() 清除延迟定时器

第一种清楚计时器的方法

var timer = setInterval(function(){
            console.log(1);
        },1000);
        clearInterval(timer);

clearInterval(timer)里面timer变量名表示清楚该变量名的定时器

第二种清楚定时器的方法

var timer = setInterval(function(){
            console.log(1);
        },1000);
var timer = setInterval(function(){
            console.log(1);
        },1000);
        clearInterval(2);

clearInterval(2)里面填数字表示清楚第几个计时器，（而不是第几回计时器），这种方法不常用

那么如何知道我们写的JS代码有几个计时器？？

        var timer1 = setInterval(function(){},100);
        var timer2 = setInterval(function(){},200);
        var timer3 = setInterval(function(){},300);
        console.log(timer1);
        console.log(timer2);
        console.log(timer3);

定时器的返回结果代表，的是当前JS程序中的几个定时器（和定时器第二个参数时间没有任何关系）

那么还要另一种情况

          var timer2 = setInterval(function(){},1000);//JS代码中第一个计时器
          var timer3 = setInterval(function(){},1000);//JS代码中第二个计时器
          var timer1 = setInterval(function(){},1000);//JS代码中第三个计时器
          console.log(timer1);//打印变量名为timer1计时器
          console.log(timer2);//打印变量名为timer2计时器
          console.log(timer3);//打印变量名为timer3计时器

定时器的返回值，表示在JS代码中出现的第几个定时器（跟变量没有关系）

JS单线程

JS是单线程 只能同时做一件事情（任务）、做完一件事情、才能做下一件事情

           for(var i=0;i<100000;i++){ 
            console.log(1);
          }
            setTimeout(function(){
            console.log(2);
          }, 10);

单线程是指JS会先执行前面的for循环（不管前面的for循环加载有多少）然后在执行下面的计时器，JS程序是重上到下执行的

同步任务和异步任务

         var a = 2;//第一步a存储2
         var b = 3;//第二步b存储3
         var c = 4;//第三步c存储4
         console.log(a);//第四步打印变量a
         console.log(b);//第五步打印变量b
         console.log(c);//第六步打印变量c
         //他是从上到下执行JS的代码的

那么用定时器把变量b插入到console.log(a)会打印出来什么呢？？

         var a = 2;
         var b = 3;
         var c = 4;
         setTimeout(function(){
            console.log(b);
         },100);
         console.log(a);
         console.log(c);

这说明了，这个回调函数是等到100毫秒之后才执行的，二而a,c是瞬间执行的，所以先打印a,c在打印b了
及时计时器0秒执行回调函数的代码那么他还会在a,c之后执行的

那为什么呢？？

JS任务的分类

• 同步任务 放置在主线程中执行
• 异步任务 放置在异步队列中等待（事件轮询机制）。异步任务是 (定时器的回调函数） 、（事件）、（Ajax）

异步任务形成一个异步队列、然后主线程的任务执行完成之后、就会执行异步队列的任务，这就叫做事件轮询机制

JS处理任务的顺序 ：先做完同步任务 再做异步任务

        var a = 2;
         var b = 3;
         var c = 4;
         console.log(c);
         setTimeout(function(){
            console.log(b);
         },0);
         setTimeout(function(){
            console.log('heaven');
         },100);
         console.log(a);

onclick点击事件（异步任务）

  #box{
            width: 200px;
            height: 100px;
            background-color: pink;
        }

<div id="box"></div>
    <script>
         var oBox =  document.getElementById("box");
         oBox.onclick = function(){
            console.log('我被点击了');
         }
    </script>

每点击一下粉色div就会出现一个'我被点击了'

那么计时器中那个参数是异步代码？？？

          for(var i=0;i<5;i++){//同步代码
               setTimeout(function(){//异步代码
                    console.log(i)
               },1000);
           };
           //定时器会在for循环结束之后执行
           //异步代码都会在同步代码执行之后执行

刷新之后1秒跳出的结果

         for(var i=0;i<5;i++){
               setTimeout(function(){ 
                    console.log(i)
               },i*1000);
           };

他不是同时打印，说明了计时器真正的异步代码是 里面的回调函数，而不是后面的秒数

那么如何同时打印0，1，2，3，4

          for(var i=0;i<5;i++){
               (function(i){
                 setTimeout(function(){ 
                    console.log(i)
                 },1000);
               })(i);
            };

 for(var i=0;i<5;i++){
        /*
        * i=0  向异步队列中放一个异步任务
        * i=1  向异步队列中放一个异步任务
        * i=2  向异步队列中放一个异步任务
        * i=3  向异步队列中放一个异步任务
        * i=4  向异步队列中放一个异步任务
        * i=5  执行异步队列的任务
        * */
        (function(i){
            //AO{i:0}
            //AO{i:1}
            //AO{i:2}
            //AO{i:3}
            //AO{i:4}
            setTimeout(function(){
                //i=0  AO{i:0}+GO
                //i=1  AO{i:1}+GO
                //i=2  AO{i:2}+GO
                //i=3  AO{i:3}+GO
                //i=4  AO{i:4}+GO
                console.log(i);
            },1000)
        })(i)
    }

线程阻塞

         setTimeout(function(){//异步任务
            console.log(2);
          }, 10);
           for(var i=0;i<100000;i++){//同步任务
            console.log(1);
          }

同步任务代码执行完之后在执行异步任务代码

线程阻塞 ：前面的任务死循环或者耗时过长导致后面代码不能被执行，这种情况叫做线程阻塞