定时器基础知识（32）

 * 定时器：设定一个定时器，并且设定了等到的时间，当到达执定的时间，浏览器会把对应的方法执行

 *

 * [常用定时器]

 *    setTimeout([function],[interval])

 *    setInterval([function],[interval])

 *

 *       [function]：到达时间后执行的方法（设置定时器的时候方法没有执行，到时间浏览器帮我们执行）

 *       [interval]：时间因子（需要等到的时间 MS）

 *

 *    setTimeout是执行一次的定时器，setInterval是可执行多次的定时器

//=>执行一次
// let count = 0;
// setTimeout(() => {
//     count++;
//     console.log(count);
// }, 1000);

//=>轮循定时器：每间隔INTERVAL这么长的时间，都会把设定的方法重新执行一次，直到定时器被清除
// let count = 0;
// setInterval(() => {
//     count++;
//     console.log(count);
// }, 1000);

//=>清除定时器

//=>clearTimeout / clearInterval：这两个方法中的任何一个都可以清除用任何方法创建的定时器

//1.设置定时器会有一个返回值，这个值是一个数字，属于定时器的编号，代表当前是第几个定时器（不管是基于setTimeout还是setInterval创建定时器，这个编号会累加）

//2.clearTimeout([序号])/clearInterval([序号])：根据序号清除浏览器中设定的定时器

// let count = 0;
// let timer = setInterval(() => {
//     count++;
//     console.log(count);
//     if (count === 5) {
//         //=>清除定时器
//         clearTimeout(timer);
//     }
// }, 1000);

异步编程的原理

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

 *    同步编程：任务是按照顺序依次处理，当前这件事没有彻底做完，下一件事是执行不了的

 *    异步编程：当前这件事没有彻底做完，需要等待一段时间才能继续处理，此时我们不等，继续执行下面的任务，当后面的任务完成后，再去把没有彻底完成的事情完成

 *

 *    [JS中的异步编程]

 *       1.所有的事件绑定都是异步编程   xxx.οnclick=function(){}

 *       2.所有的定时器都是异步编程 setTimeout(function(){},1000)

 *       3.AJAX中一般都使用异步编程处理

 *       4.回调函数也算是异步编程

 *       ...

// let n = 0;
// setTimeout(() => {
//     console.log(++n);//=>1) 
// }, 1000);
// console.log(n);//=>0) 

//=>定时器设定一个时间，到达时间后不一定执行（如果当前还有其它的同步任务正在处理，那么到时间了也得等着）
// let n = 0;
// setTimeout(() => {
//     console.log(++n);
// }, 1000);
// console.log(n);//=>0
// while(1===1){
//     //=>死循环
// }

//=>浏览器是如何规划同步异步机制的

//1.浏览器是多线程的，JS是单线程的（浏览器只给JS执行分配一个线程）：单线程的特点就是一次只能处理一件事情

//进程：每一个应用程序都可以理解为一个进程（浏览器打开一个页面，就相当于开辟一个进程），在一个程序中（进程中）我们经常会同时干很多事情，此时我们可以分配多个线程去同时完成多项任务

//2.JS在单线程中实现异步的机制，主要依赖于浏览器的任务队列完成的。浏览器中有两个任务队列（主任务队列、等待任务队列）

// setTimeout(() => {
//     console.log(1);
// }, 20);
// console.log(2);
// setTimeout(() => {
//     console.log(3);
// }, 10);
// setTimeout(() => {
//     console.log(4);
// }, 100);
// for (let i = 0; i < 90000000; i++) {
//
// }
// console.log(5);
//=>2 5 3 1 4


//=>测试程序反应时间
// // let startTime = new Date();
// console.time('AA');
// for (let i = 0; i < 90000000; i++) {
//
// }
// // console.log(new Date() - startTime);
// console.timeEnd('AA');

// let n = 0;
// setTimeout(() => {
//     console.log(++n);
// }, 0);//=>定时器时间因子设置为零也不是立即执行，每个浏览器都有一个自己最小的等待和反应时间（谷歌：5~6  IE：10~13），所以写零还是异步编程
// console.log(n);

初识Promise

 * Promise：它是ES6中新增加的类 (new Promise)，目的是为了管理JS中的异步编程的，所以我们也把它称为“Promise设计模式”

// let p = new Promise();
// p.then();

//=>三个状态：pending(准备:初始化成功，开始执行异步的任务)\fulfilled(成功)\rejected(失败)

// new Promise(() => {
//     //=>执行一个异步的任务（new Promise的时候，创建Promise的一个实例，立即会把当前函数体中的异步操作执行） =>“Promise是同步的，它可以管理异步操作”
//     setTimeout(() => {
//
//     }, 1000);
//     console.log(1);//=>先输出1
// }).then();
// console.log(2);//=>再输出2

// new Promise((resolve, reject) => {
//     //=>resolve：当异步操作执行成功，我们执行resolve方法
//     //=>reject：当异步操作执行失败，我们执行reject方法
//     setTimeout(() => {
//         resolve(100);
//     }, 1000);
// }).then((res) => {
//     //=>第一个传递的函数是resolve
//     console.log('ok', res);
// }, () => {
//     //=>第二个传递的函数是reject
//     console.log('no');
// });

// let val = null;
// let xhr = new XMLHttpRequest();
// xhr.open('get', 'js/1.js', true);//=>true AJAX异步
// xhr.onreadystatechange = () => {
//     if (xhr.readyState === 4 && xhr.status === 200) {
//         val = xhr.responseText;
//         //=>此处是获取结果,获取结果后还要做很多的事情（此时我们只能把数数绑定等任务写在这里）
//     }
// };
// xhr.send(null);
// console.log(val);//=>如果使用异步AJAX请求，不等AJAX彻底完成，就把VAL输出，此时的结果是NULL

let pro = new Promise((resolve, reject) => {
    //=>执行一个异步操作
    let xhr = new XMLHttpRequest();
    xhr.open('get', 'js/1.js', true);
    xhr.onreadystatechange = () => {
        if (xhr.readyState === 4 && xhr.status === 200) {
            val = xhr.responseText;
            resolve(val);
        }
        if (xhr.status !== 200) {
            //=>失败
            reject();
        }
    };
    xhr.send(null);
});
pro.then((res) => {
    console.log(res);
    //=>数据绑定
    return 100;//=>它返回的结果传递给第二个THEN了...
}, () => {
    console.log('no');
}).then((res) => {
    //=>当第一个THEN中的函数执行完，会执行第二个
    console.log(res);
}, () => {

}).then(() => {
    //=>当第二个THEN中的函数执行完，会执行第三个
}, () => {

});