如下例子,可以初步帮我们理解javascript的线程机制。我们都知道javascript是单线程,那么它是怎么实现异步的呢?
然后async在google上已经支持,据说用babel转为es5可能更兼容。
//一个让当前线程休眠一段时间的方法
function sleep(interval) {
return new Promise(resolve => {
setTimeout(resolve, interval);
})
}
//异步函数
async function one2FiveInAsync(name) {
for(let i = 1; i <= 5; i++) {
console.log(i+name);
//每一次循环打印之后,让当前的处理休眠一段时间(可以理解为进入异步处理)并继续后续同步代码的执行
// 等到下一轮如果休眠完成,再继续
await sleep(1000);
}
}
one2FiveInAsync("第一次");
one2FiveInAsync("第二次");
for(let i = 0;i<=10;i++){
console.log("同步"+i)
}
//从执行结果我们可以看出,javascript对于线程是一轮一轮的去访问遍历的,
//而不是某个异步完成后回调函数立即执行的,而是等到下一波轮询的时候执行
// 1第一次
// 1第二次
// 同步1
// 同步2
// 同步3
// 同步4
// 同步5
// 同步6
// 同步7
// 同步8
// 同步9
// 同步10
// 2第一次
// 2第二次
// 3第一次
// 3第二次
// 4第一次
// 4第二次
// 5第一次
// 5第二次
class Sleep {
constructor(timeout) {
this.timeout = timeout;
}
then(resolve, reject) {
const startTime = Date.now();
setTimeout(
() => resolve(Date.now() - startTime),
this.timeout
);
}
}
function sleep(interval) {
return new Promise(resolve => {
setTimeout(resolve, interval);
})
}
(async () => {
const sleepTime = await new Sleep(5000); //注意这里加await和不加await的区别 注意整个异步函数内部,使用await之后,它会等待计算出来结果之后,再获得执行权,继续往下跑。
console.log("线程休眠时间"+sleepTime);
console.log("同步代码执行标记2");
})();
console.log("异步函数体外----同步代码执行标记2");
//从执行
//异步函数体外----同步代码执行标记2
// 线程休眠时间5002
// 同步代码执行标记2