异步javascript

官方文档

简介

异步 JavaScript 是指程序的执行流程不是严格按照代码的顺序进行的,而是允许某些操作在不阻塞主线程的情况下并行执行。这与同步执行模式形成鲜明对比,在同步执行中,程序会一直等待某个操作完成才会继续向下执行。

异步 JavaScript 的主要体现形式

事件监听器

事件监听器允许程序在特定事件发生时执行回调函数,而不需要阻塞主线程。下面是一个简单的事件监听器示例:

js 复制代码
// 点击按钮时执行回调函数
document.getElementById('myButton').addEventListener('click', function() {
  console.log('Button clicked!');
});


console.log('This message will be logged first.');

在这个例子中,即使点击按钮的操作还没有完成,主线程也会继续向下执行,打印出"This message will be logged first."。

定时器函数

setTimeout() 和 setInterval() 函数允许程序在指定的延迟后执行某个函数,而不会阻塞主线程的执行。下面是一个使用 setTimeout() 的示例:

js 复制代码
console.log('This message will be logged first.');

setTimeout(function() {
  console.log('This message will be logged after 2 seconds.');
}, 2000);

console.log('This message will be logged second.');

在这个例子中,尽管 setTimeout() 函数需要 2 秒钟才能执行完毕,但主线程仍然可以继续向下执行,打印出"This message will be logged second."。

AJAX 请求

AJAX 技术允许程序在不刷新页面的情况下向服务器发送异步请求并获取数据。下面是一个使用 AJAX 的示例:

js 复制代码
// 使用 XMLHttpRequest 对象发送 AJAX 请求
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log('Response data:', xhr.responseText);
  } else {
    console.error('Error:', xhr.statusText);
  }
};
xhr.onerror = function() {
  console.error('Network error.');
};
xhr.send();

console.log('This message will be logged first.');

在这个例子中,AJAX 请求是异步执行的,主线程不会因为等待请求完成而被阻塞。

Promise 和 async/await

Promise 对象和 async/await 语法糖为异步编程提供了更加优雅和易于管理的方式。下面是一个使用 Promise 的示例:

js 复制代码
function fetchData() {
  return new Promise((resolve, reject) => {
    // 模拟一个异步操作,如网络请求
    setTimeout(() => {
      resolve({ data: 'Hello, async world!' });
    }, 2000);
  });
}

fetchData()
  .then((result) => {
    console.log(result.data); // 输出: "Hello, async world!"
  })
  .catch((error) => {
    console.error('Error:', error);
  });

console.log('This message will be logged first.');

在这个例子中,fetchData() 函数返回一个 Promise 对象,模拟了一个异步操作。在 Promise 的 then() 方法中,我们处理了异步操作成功的结果,在 catch() 方法中,我们处理了异步操作失败的情况。值得注意的是,尽管异步操作需要 2 秒才能完成,但主线程仍然可以继续执行其他任务,如最后一行的输出。

相关推荐
z_mazin5 分钟前
JavaScript逆向魔法:Chrome开发者工具探秘之旅
javascript·chrome·爬虫
Xiaok10186 分钟前
解决 Hugging Face SentenceTransformer 下载失败的完整指南:ProxyError、SSLError与手动下载方案
开发语言·神经网络·php
绿草在线8 分钟前
Mock.js虚拟接口
开发语言·javascript·ecmascript
go_bai19 分钟前
Linux环境基础开发工具——(2)vim
linux·开发语言·经验分享·笔记·vim·学习方法
小郝 小郝20 分钟前
【C语言】strstr查找字符串函数
c语言·开发语言
yinhezhanshen26 分钟前
理解rust里面的copy和clone
开发语言·后端·rust
Jtti42 分钟前
PHP在Debian环境上的并发处理能力如何
开发语言·debian·php
时光追逐者1 小时前
在 Blazor 中使用 Chart.js 快速创建数据可视化图表
开发语言·javascript·信息可视化·c#·.net·blazor
独好紫罗兰1 小时前
洛谷题单3-P5718 【深基4.例2】找最小值-python-流程图重构
开发语言·python·算法
小天努力学java1 小时前
【面试题】如何用两个线程轮流输出0-200的值
java·开发语言