12-第十二章 定时器 Math函数

单线程容易被阻塞 / 同步 会很耗时
异步 后续的任务无需等待

定时器是异步的，同步代码和异步代码同时存在的时候，同步代码会先执行，然后异步代码再执行

一、定时器

使用定时器一定要注意离开页面的时候要清除，回到页面再继续启动
window.onblur 页面失去焦点时
window.onfoucs 页面获得焦点时

定时任务：隔固定时间做某件事（一次性）、无限次的循环做

setTimeout 一次性定时器
setInterval 多次执行的定时器

定时器调用这个函数不用传参，直接写函数名即可，
定时器调用这个函数要传参，必须接受一个回调

        setInterval (() => {
            a + b;
        }, 1000)



        setInterval (fn, 1000)

1 、setInterval()

setInterval( function(){} , 最小13 ~ 20) 多用于动画
第一个参数是一个函数
第二参数是时间，表示1秒（1000毫秒）后调用一次，然后每隔1秒调用一次，第一个参数
后面可以传参数

        setInterval ((a, b) => {
            console.log(a); // a 为 1
            console.log(b); // b 为 2
        },1000, 1, 2) 

（1）、 一般使用

var a = 0;
setInterval( function(){ a++; console.log( a )   },1000)


var a = 0;
function fn(){
    a++;
    console.log( a )
}
setInterval(fn,1000)

（2）、 第一个参数fn 与 fn() 区别，fn()会不等延迟，直接调用，后面不在调用

var a = 0;
function fn(){
    a++;
    console.log( a ).
}
setInterval(fn,1000)

（3）、 带return 值的 fn

        var a = 0;
        function fn(){
            a++;
            alert(a);
            return function(){alert('ok')  };
        }
        setInterval(fn(),3000)

2 、clearInterval()清除定时器

定时器是事件执行的时候，最好在前面先清除定时器一次，因为每点击一次都是生成一个新的定时器

    let timer = null;
    document.onclick = () => {
      clearInterval(timer);
      timer = setInterval((function () {
        console.log(1);
      }), 1000);
    }

clearInterval( timerManeger ) 里面的参数的定时管理器

var timer = setInterval(fn,1000);// 设置变量timer为定时管理器
clearInterval(timer);//清除timer定时管理器

3 、setTimeout() 一次定时器

setTimeout( function(){},1000 )
第一个参数是一个函数
第二参数是时间，表示1秒（1000毫秒）后调用一次，然后不再调用

var  a =  0;
setTimeout( function(){ alert( a ) },1000);//只有一次弹窗

4、clearTimeout()

clearTimeout( timerManeger ) 清除定时管理器,用于清除动画还没执行

var timer = setInterval(fn,1000); //设置变量timer为定时管理器
clearInterval(timer); // 清除 timer定时管理器

5、当我们的定时器第一个参数为一个函数的时候，这个函数又是一个立即执行的函数，可以把第一个参数用单引号引起来，它会视作一个需要定时器来调用的函数

    setInterval('alert(1)', 2000);

6、定时器的 this 指向问题

由 setTimeout() 调用的代码运行在与所在函数完全分离的执行环境上。这会导致，这些代码中包含的 this 关键字在非严格模式会指向 window (或全局)对象，严格模式下为 undefined，这和所期望的 this 的值是不一样的

解决这个问题可以使用 bind 来修改函数的 this 指向问题

    let myArray = ['zero', 'one', 'two'];

    myBoundMethod = (function (sProperty) {
        console.log(arguments.length > 0 ? this[sProperty] : this);
    }).bind(myArray);

    myBoundMethod(); // "zero,one,two" 
    myBoundMethod(1); // "one"
    setTimeout(myBoundMethod, 1000); // "zero,one,two" 
    setTimeout(myBoundMethod, 1500, "1"); // "one"

二 、Math 数字函数

Math对象用于执行数学任务 Math对象 无需new，直接调用Math方法就行

Math方法 一

1、Math.random() 求随机值

Math.random()随机 0至 小于1 的数 取不到1

// 随机 0~1之间的数

var rand = Math.random();
alert( rand );

// 随机 5~10之间的数

var rand =  Math.floor(Math.random() *（10 - 5 + 1）+ 5);

封装 随机 X至Y之间的数

function random(x, y){
    var rand =  Math.floor(Math.random() * (y - x + 1) + x);
}

2、 Math.round()————四舍五入

var a = 12.6;
Math.round(a ); // 13

Math.ceil()————向上取整 (上舍入)

Math.floor()————向下取整 (下舍入)

Math.abs()—————求绝对值

Math.pow(x,y)———–x 的 y 次幂（ x 的 y 次方）

Math.sqrt(x)—————返回数的平方根

Math.max(x,y,z...)——求 x 和 y 的最大值

Math.min(x,y,z...)——求 x 和 y 的最小值

Math.abs(value)——求某个数的绝对值

Math.trunc(任意数字)
方法会将数字的小数部分去掉，只保留整数部分。
传入该方法的参数会被隐式转换成数字类型。
不像 Math 的其他三个方法： Math.floor()、Math.ceil()、Math.round()，Math.trunc() 的执行逻辑很简单，仅仅是删除掉数字的小数部分和小数点，不管参数是正数还是负数

案例3：随机色卡（随机颜色讲解）

numberObject.toFixed()
NumberObject.toFixed(num) 方法可把 Number 四舍五入为指定小数位数的数字
num 规定小数的位数，是 0 ~ 20 之间的值 ,默认0

    var a = 12.655454;
    var round = a.toFixed(3);
    alert( round );//12.655

三、Math方法 二

“度”的定义是，“两条射线从圆心向圆周射出，形成一个夹角和夹角正对的一段弧。当这段弧长正好等于圆周长的360分之一时，两条射线的夹角的大小为1度。（如图1）
弧度的定义是：两条射线从圆心向圆周射出，形成一个夹角和夹角正对的一段弧。当这段弧长正好等于圆的半径时，两条射线的夹角大小为1弧度。（如图2）

image.png

角所对的弧长是半径的几倍，那么角的大小就是几弧度。
它们的关系可用下式表示和计算：
（弧度）＝弧长/半径
圆的周长是半径的 2π倍，所以一个周角（360度）是 2π弧度。

---

三、度跟弧度之间的换算

据上所述，一个平角是 π 弧度。
即 180度＝π弧度
由此可知：
弧度＝π/180度 ( ≈0.017453弧度 )

1度=π/180≈0.01745弧度，1弧度=180/π≈57.3度

---

1、Math.sin（弧度） 正弦 对边比斜边 一个以弧度表示的角

---

2 、Math.cos（弧度）余弦 邻边比斜边 是 -1.0 到 1.0 之间的数

---

3、 Math.PI

Math.PI 即π 是圆的周长和它的直径之比。这个值近似为 3.141592653589793
一弧度 = π/180；将角度乘以（2PI/360） 0.017453293 即可转换为弧度

---

案例4：圆周运动（三角函数讲解）

image.png