同步代码:逐行执行,需原地等待执行结果后,才继续执行下一行。
异步代码:调用后耗时,但不阻塞其它代码继续执行,即不必原地等待,在将来完成后触发一个回调函数来接收结果。如setTimeout函数、setInterval函数、事件、AJAX。
示例:
下面示例中标出了同步代码、异步代码,从打印结果的顺序也可以看出来:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>同步代码和异步代码</title>
</head>
<body>
<button class="btn">点击一次打印一次</button>
<script>
const result = 0 + 1 // 同步代码
console.log(result) // 同步代码
setTimeout(() => {
console.log(2) // 异步代码
}, 5000)
document.querySelector('.btn').addEventListener('click', () => {
console.log(3) // 异步代码
})
document.body.style.backgroundColor = 'pink' // 同步代码
console.log(4) // 同步代码
</script>
</body>
</html>
5秒以后:
点击按钮一次: