什么是异步(对比同步)
异步:不会有阻塞
console.log(100);
setTimeout(function () {
console.log(200);
}, 1000);
console.log(300);
同步:会阻塞,需要等待确认后才会继续执行
console.log(100);
alert(200);
console.log(300);
前端使用异步的场景
何时需要异步
在可能发生等待的情况
等待过程中不能像alert一样阻塞程序运行
因此,所有的“等待的情况”都需要异步
定时任务:setTimeout, setInterval
网络请求:ajax请求,动态<img>加载
事件绑定
ajax请求代码示例
console.log('start');
$.get('./data1.json', function (data1) {
console.log(data1);
});
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');
异步和单线程
console.log(100);
setTimeout(function () {
console.log(200);
});
console.log(300);
异步:不会有阻塞
console.log(100);
setTimeout(function () {
console.log(200);
}, 1000);
console.log(300);
同步:会阻塞,需要等待确认后才会继续执行
console.log(100);
alert(200);
console.log(300);
前端使用异步的场景
何时需要异步
在可能发生等待的情况
等待过程中不能像alert一样阻塞程序运行
因此,所有的“等待的情况”都需要异步
定时任务:setTimeout, setInterval
网络请求:ajax请求,动态<img>加载
事件绑定
ajax请求代码示例
console.log('start');
$.get('./data1.json', function (data1) {
console.log(data1);
});
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');
异步和单线程
console.log(100);
setTimeout(function () {
console.log(200);
});
console.log(300);