异步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 秒才能完成,但主线程仍然可以继续执行其他任务,如最后一行的输出。

相关推荐
Json_3 分钟前
JS中的apply和arguments小练习
前端·javascript·深度学习
DreamByte4 分钟前
C++菜鸟教程 - 从入门到精通 第五节
开发语言·c++·算法
Light6015 分钟前
深入剖析JavaScript多态:从原理到高性能实践
javascript·性能优化·多态·类型推断·代码复用·v8引擎
Ljugg16 分钟前
把doi直接插入word中,然后直接生成参考文献
开发语言·c#·word
长流小哥17 分钟前
可视化开发:用Qt实现Excel级动态柱状图
开发语言·c++·qt·ui
云只上17 分钟前
前端界面在线excel编辑器 。node编写post接口获取文件流,使用传参替换表格内容展示、前后端一把梭。
前端·javascript·node.js·excel
Python测试之道25 分钟前
Deepseek API+Python 测试用例一键生成与导出 V1.0.6(加入分块策略,返回更完整可靠)
开发语言·python·测试用例
SRC_BLUE_1728 分钟前
Python GUI 编程 | QObject 控件基类详解 — 定时器
开发语言·数据库·python
啊阿狸不会拉杆36 分钟前
第二十一章:Python-Plotly库实现数据动态可视化
开发语言·python·plotly
滴答滴答嗒嗒滴1 小时前
Python小练习系列 Vol.12:学生信息排序(sorted + key函数)
开发语言·python