* 定时器:设定一个定时器,并且设定了等到的时间,当到达执定的时间,浏览器会把对应的方法执行
*
* [常用定时器]
* 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中的函数执行完,会执行第三个
}, () => {
});