【JS基础】异步和单线程

同步和异步的区别是什么？

js是单线程的，只能同时做一件事，所以就需要异步
同步会阻塞代码执行，而异步不会
alert是同步，setTimeout是异步

// 异步
console.log(100);
setTimeout(function () {
    console.log(200);
}, 1000);
console.log(300);

// 同步
console.log(100);
alert(200); // 1秒之后点击确认
console.log(300);

何时需要异步？
在可能发生等待的情况，等待过程中不能像alert一样阻塞程序进行。因此，所有“等待的情况”都需要异步。

前端使用异步的场景有哪些?

定时任务：setTimeOut，setInterval
网络请求：ajax请求，动态 <img> 加载
事件绑定

// ajax请求
console.log('start');
$.get('./data1.json', function (data) {
    console.log(data);
});
console.log('end');

// <img> 加载
console.log('start');
var img = document.createElement('img');
img.onload = function () {
    console.log('loaded');
};
img.src = '/xxx.png';
console.log('end');

// 事件绑定
console.log('start');
document.getElementById('btn1').addEventListener('click', function () {
    alert('clicked');
});
console.log('end');