新建： 编辑：   |   分类：   | 字数： 521 字

同步代码

  • 代码按顺序一行一行执行
  • 当执行耗时操作时，后续代码只能等待当前代码执行完成后才能执行

比如 alert 函数就是同步代码。

JavaScript
1const p = document.querySelector('.paragraph');
2p.textContent = 'JS 修改后内容';
3alert('阻塞')
4p.style.color = 'red';
HTML
1<p class="paragraph">初始内容</p>
2
3<script src="index.js"></script>

异步代码

  • 只会在“后台”任务执行完成后执行
  • 非阻塞式，即后续代码不会等待异步代码执行完成后再执行。实际的效果就是，仿佛直接跳过了异步代码

比如 setTimeout 函数就是异步代码。

JavaScript
1const p = document.querySelector('.paragraph');
2setTimeout(() => {
3  p.textContent = 'JS 修改后内容';
4}, 3000);
5p.style.color = 'red';
HTML
1<p class="paragraph">初始内容</p>
2
3<script src="index.js"></script>

再比如 DOM 加载图片也属于异步操作。

JavaScript
 1const img = document.querySelector('.logo');
 2const p = document.querySelector('.paragraph');
 3
 4// DOM 加载图片是一个异步操作
 5img.src = 'logo.png';
 6
 7img.addEventListener('load', () => {
 8  // 在图片加载完成后触发
 9  p.textContent = '图片加载完成';
10});
11
12p.style.color = 'red';
HTML
1<img class="logo">
2<p class="paragraph">未加载图片</p>
3
4<script src="index.js"></script>

JS 中常见的异步操作

  • 定时器（setTimeout、setInterval）
  • DOM 加载图片
  • 定位 API（Geolocation API）
  • AJAX（Asynchronous JavaScript And XML）
0%