【前端每日基础】day43——同步异步

2024-06-05 02:12

本文主要是介绍【前端每日基础】day43——同步异步,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

同步 (Synchronous)
同步指的是程序中的操作按顺序执行,每个操作必须等待前一个操作完成后才能开始。简单来说,同步操作会阻塞后续操作,直到当前操作完成。同步编程模式适合于需要按顺序执行的任务。

示例:

假设有三个任务 A、B 和 C,它们依次执行。任务 B 必须等待任务 A 完成后才能开始,任务 C 也必须等待任务 B 完成后才能开始。

// 伪代码示例
function taskA() {console.log('Task A completed');
}function taskB() {console.log('Task B completed');
}function taskC() {console.log('Task C completed');
}taskA();
taskB();
taskC();// 输出顺序:
// Task A completed
// Task B completed
// Task C completed

在上述例子中,taskB 只有在 taskA 完成后才会执行,taskC 只有在 taskB 完成后才会执行。

异步 (Asynchronous)
异步指的是程序中的操作不必等待前一个操作完成后再开始。异步操作会在后台执行,不会阻塞后续操作。异步编程模式适合于需要并发处理的任务,例如网络请求、文件读取等。

示例:

假设有三个任务 A、B 和 C,它们是异步执行的,任务 B 和任务 C 可以在任务 A 完成之前启动并执行。

// 伪代码示例
function taskA() {setTimeout(() => {console.log('Task A completed');}, 1000); // 模拟异步操作,1秒后完成
}function taskB() {setTimeout(() => {console.log('Task B completed');}, 500); // 模拟异步操作,0.5秒后完成
}function taskC() {console.log('Task C completed');
}taskA();
taskB();
taskC();// 输出顺序可能是:
// Task C completed
// Task B completed
// Task A completed

在上述例子中,taskA 和 taskB 都是异步操作,它们不会阻塞 taskC。因此,taskC 会立即执行并输出结果,而 taskA 和 taskB 会在各自的定时器完成后输出结果。

同步和异步在实际编程中的应用
同步操作:常见于需要严格按照顺序执行的任务,例如处理用户输入、简单的数学计算等。

异步操作:常见于耗时操作,如网络请求、文件读取、定时任务等。通过异步操作,可以提高程序的并发性能和响应速度,不会因为某个耗时任务而阻塞整个程序。

异步编程在 JavaScript 中的实现:

回调函数:通过将回调函数作为参数传递给异步操作,在异步操作完成后调用回调函数。

function asyncTask(callback) {setTimeout(() => {console.log('Async task completed');callback();}, 1000);
}asyncTask(() => {console.log('Callback executed');
});

Promise:提供了一种更清晰的方式来处理异步操作,可以通过 .then 和 .catch 方法链式调用。

function asyncTask() {return new Promise((resolve, reject) => {setTimeout(() => {console.log('Async task completed');resolve();}, 1000);});
}asyncTask().then(() => {console.log('Promise resolved');
});

async/await:是基于 Promise 的语法糖,使得异步代码看起来像同步代码。

async function runAsyncTask() {await asyncTask();console.log('Async/await completed');
}runAsyncTask();

这篇关于【前端每日基础】day43——同步异步的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1031782

相关文章

部署Vue项目到服务器后404错误的原因及解决方案

《部署Vue项目到服务器后404错误的原因及解决方案》文章介绍了Vue项目部署步骤以及404错误的解决方案,部署步骤包括构建项目、上传文件、配置Web服务器、重启Nginx和访问域名,404错误通常是... 目录一、vue项目部署步骤二、404错误原因及解决方案错误场景原因分析解决方案一、Vue项目部署步骤

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》:本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2

0基础租个硬件玩deepseek,蓝耘元生代智算云|本地部署DeepSeek R1模型的操作流程

《0基础租个硬件玩deepseek,蓝耘元生代智算云|本地部署DeepSeekR1模型的操作流程》DeepSeekR1模型凭借其强大的自然语言处理能力,在未来具有广阔的应用前景,有望在多个领域发... 目录0基础租个硬件玩deepseek,蓝耘元生代智算云|本地部署DeepSeek R1模型,3步搞定一个应

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》:本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法,通过简单的两列实现、每行放置3列以及全部代码的展示,展示了这两种布局方式的实现细节和效果,详细内容请阅读本文,希望能对你有所帮助... 过往的实现方法是使用浮动加

css渐变色背景|<gradient示例详解

《css渐变色背景|<gradient示例详解》CSS渐变是一种从一种颜色平滑过渡到另一种颜色的效果,可以作为元素的背景,它包括线性渐变、径向渐变和锥形渐变,本文介绍css渐变色背景|<gradien... 使用渐变色作为背景可以直接将渐China编程变色用作元素的背景,可以看做是一种特殊的背景图片。(是作为背

CSS自定义浏览器滚动条样式完整代码

《CSS自定义浏览器滚动条样式完整代码》:本文主要介绍了如何使用CSS自定义浏览器滚动条的样式,包括隐藏滚动条的角落、设置滚动条的基本样式、轨道样式和滑块样式,并提供了完整的CSS代码示例,通过这些技巧,你可以为你的网站添加个性化的滚动条样式,从而提升用户体验,详细内容请阅读本文,希望能对你有所帮助...

异步线程traceId如何实现传递

《异步线程traceId如何实现传递》文章介绍了如何在异步请求中传递traceId,通过重写ThreadPoolTaskExecutor的方法和实现TaskDecorator接口来增强线程池,确保异步... 目录前言重写ThreadPoolTaskExecutor中方法线程池增强总结前言在日常问题排查中,

css实现图片旋转功能

《css实现图片旋转功能》:本文主要介绍了四种CSS变换效果:图片旋转90度、水平翻转、垂直翻转,并附带了相应的代码示例,详细内容请阅读本文,希望能对你有所帮助... 一 css实现图片旋转90度.icon{ -moz-transform:rotate(-90deg); -webkit-transfo

微服务架构之使用RabbitMQ进行异步处理方式

《微服务架构之使用RabbitMQ进行异步处理方式》本文介绍了RabbitMQ的基本概念、异步调用处理逻辑、RabbitMQ的基本使用方法以及在SpringBoot项目中使用RabbitMQ解决高并发... 目录一.什么是RabbitMQ?二.异步调用处理逻辑:三.RabbitMQ的基本使用1.安装2.架构