浅谈Javascript异步和单线程

浅谈Javascript异步和单线程

1.异步和同步的区别

// 异步执行没有阻塞
console.log(100);
setTimeout(() => {
	console.log(200);  // 需要等待，但是并没有阻塞后边代码的执行
}, 0);
console.log(300);
// 执行顺序 100 300 200

执行第一步：打印出100。
执行到setTimeout后，传入setTimeout的函数会被放到暂存区暂存起来，不会立即执行（单线程的特点，不能同事干两件事情）。
执行最后一步：打印出300。
待所有程序执行完，处于空闲状态时，就会马上去暂存区查看有没有暂存的代码，如以上代码，暂存起来的setTimeout的函数设置了0s等待时间（也就是无需等待），就会立即过来执行。
（ps:如设置了等待时间，就等待时间再执行。） 

// 同步执行有阻塞（阻塞后边代码的执行）
console.log('a');  // a
alert('b');        // 如果alert弹窗不关闭， 后边的代码就没有办法执行
console.log('c');  // ...

2.何时需要异步（在可能发生等待的情况）

// 2-1.定时任务 setTimeout/setInterval
console.log('aa');
setTimeout(() => {
	console.log('bb');  // 虽然需要等待， 但是并没有影响后边代码的执行(异步执行没有阻塞)
}, 1000);
console.log('cc');
// 执行顺序 aa cc bb 

// 2-2.网络等待ajax请求、动态img加载
// ajax请求示例
console.log('ajax示例同步1');

$.get('./api.json', function () {
	console.log('ajax异步返回');  //最后执行 （请求耗时,但不会阻塞后边代码的执行进程）
});

console.log('ajax示例同步2');
// 执行顺序 ajax示例同步1  ajax示例同步2  ajax异步返回

// img加载示例
console.log('img加载示例同步1');

var img = document.creatElement('img');
img.onload = function () {
	console.log('img loaded');  //src的 url加载需要耗时 这时不会阻塞后边代码执行 等url加载完成 再执行此操作 
};
img.src = 'https://xxxx/xxx.jpg';
document.body.appendChild(img);

console.log('img加载示例同步2');
// 执行顺序 img加载示例同步1 img加载示例同步2  img loaded

// 2-3.事件绑定
// dom 代表某dom元素
dom.addEventListener('click',function(){
    console.log('点我了');  // 执行不会卡在这里 用户什么时候点击就什么时候执行
});
console.log('click-2');
// 执行顺序 click-2  用户何时点击了dom就会执行'点我了'

3.什么是单线程（js需要排队，一个一个来执行 ，不能同时做两件事情）

console.log('main-line1');
setTimeout(function(){  //代码执行遇到异步操作 会先封存到暂存区
     console.log('temp-line2');  
})
console.log('main-line3');  //等待代码都执行完 再去暂存区查看有没有需要执行的
// 执行顺序 main-line1 main-line3 temp-line2

4.附加一道面试题（写出下列代码的执行顺序）

console.log(1);
setTimeout(function(){
    console.log(2)
},0);
console.log(3);
setTimeout(function(){
    console.log(4)
},1000);
console.log(5)

小伙伴儿们要相信自己，踊跃参与动脑，嘻嘻嘻！
我们下期见~~