js实现异步和延时

ops/2024/11/2 4:31:31/

说明:最近碰到几个需求,
1.使用js实现延时几秒,执行代码的操作 setTimeout
2.使用js实现子线程执行耗时操作,主线程不需要等待子线程任务执行完成,子线程的任务执行完成后,把执行结果回调给主线程,更新ui和界面
效果图:
step1:

javascript">import {Component, OnInit} from '@angular/core';/*参考网址: https://zhuanlan.zhihu.com/p/172378607*/@Component({selector: 'app-user',standalone: true,imports: [],templateUrl: './user.component.html',styleUrl: './user.component.css'
})
export class UserComponent implements OnInit {constructor() {console.log('constructor')}ngOnInit(): void {console.log('ngOnInit')this.test();}private getSomething() {return "something";}async testAsync() {return Promise.resolve("hello async");}async test() {const v1 = await this.getSomething();const v2 = await this.testAsync();console.log(v1, v2);}}

step2:

javascript">import {Component, OnInit} from '@angular/core';@Component({selector: 'app-user',standalone: true,imports: [],templateUrl: './user.component.html',styleUrl: './user.component.css'
})
export class UserComponent implements OnInit{constructor() {console.log('constructor')}ngOnInit(): void {console.log('ngOnInit')console.log('Hello');setTimeout(() => { console.log('World!'); }, 2000);console.log('Hello');setTimeout(() => { console.log('World!'); }, 2000);console.log('Goodbye!');}}

step3:

javascript">import {Component, OnInit} from '@angular/core';@Component({selector: 'app-user',standalone: true,imports: [],templateUrl: './user.component.html',styleUrl: './user.component.css'
})
export class UserComponent implements OnInit {constructor() {console.log('constructor')}ngOnInit(): void {console.log('ngOnInit')this.takeLongTime().then(v => {console.log("got", v);});}takeLongTime() {return new Promise(resolve => {setTimeout(() => resolve("long_time_value"), 2000);});}
}

step4:

javascript">import {Component, OnInit} from '@angular/core';@Component({selector: 'app-user',standalone: true,imports: [],templateUrl: './user.component.html',styleUrl: './user.component.css'
})
export class UserComponent implements OnInit {constructor() {console.log('constructors')}ngOnInit(): void {console.log('ngOnInit')this.test();}takeLongTime() {return new Promise(resolve => {setTimeout(() => resolve("long_time_values"), 1000);});}async test() {const v = await this.takeLongTime();console.log(v);}
}

step5:

javascript">import {Component, OnInit} from '@angular/core';@Component({selector: 'app-user',standalone: true,imports: [],templateUrl: './user.component.html',styleUrl: './user.component.css'
})
export class UserComponent implements OnInit {constructor() {console.log('constructors')}ngOnInit(): void {console.log('ngOnInit')this.doIt();}takeLongTime(n: any) {return new Promise(resolve => {setTimeout(() => resolve(n + 2000), n);});}step1(n: any) {console.log(`step1 with ${n}`);return this.takeLongTime(n);}step2(n: any) {console.log(`step2 with ${n}`);return this.takeLongTime(n);}step3(n: any) {console.log(`step3 with ${n}`);return this.takeLongTime(n);}doIts() {console.time("doIt");const time1 = 300;this.step1(time1).then(time2 => this.step2(time2)).then(time3 => this.step3(time3)).then(result => {console.log(`result is ${result}`);console.timeEnd("doIt");});}async doIt() {console.time("doIt");const time1 = 300;const time2 = await this.step1(time1);const time3 = await this.step2(time2);const result = await this.step3(time3);console.log(`result is ${result}`);console.timeEnd("doIt");}}

step6:

javascript">import {Component, OnInit} from '@angular/core';@Component({selector: 'app-user',standalone: true,imports: [],templateUrl: './user.component.html',styleUrl: './user.component.css'
})
export class UserComponent implements OnInit {constructor() {console.log('constructors')}ngOnInit(): void {console.log('ngOnInit')this.doIt()}step1(n: any) {console.log(`step1 with ${n}`);return this.takeLongTime(n);}step2(m: any, n: any) {console.log(`step2 with ${m} and ${n}`);return this.takeLongTime(m + n);}step3(k: any, m: any, n: any) {console.log(`step3 with ${k}, ${m} and ${n}`);return this.takeLongTime(k + m + n);}takeLongTime(n: any) {return new Promise(resolve => {setTimeout(() => resolve(n + 2000), n);});}async doIt() {console.time("doIt");const time1 = 300;const time2 = await this.step1(time1);const time3 = await this.step2(time1, time2);const result = await this.step3(time1, time2, time3);console.log(`result is ${result}`);console.timeEnd("doIt");}}

end


http://www.ppmy.cn/ops/130327.html

相关文章

BES2600WM---HiLink RM56 EVK

0 Preface/Foreword 0.1 路径 OpenHarmony/device_soc_bestechnic - 码云 - 开源中国 https://github.com/Hi-LinkDuino/RM56 1 环境搭建 1.1 安装依赖工具 sudo apt-get install build-essential gcc g make zlib* libffi-dev e2fsprogs pkg-config flex bison perl bc ope…

Linux 进程间通信——管道

目录 0.前言 1. 进程间通信简介 1.1 进程间通信目的 1.2 进程间通信分类 2.匿名管道 2.1什么是管道 2.2一段匿名管道的示例代码 2.3代码解读 2.4 匿名管道运行时的四种情况 2.5 匿名管道的特性 2.6 从文件描述符和内核角度理解管道 3.命名管道 3.1命名管道的原理 3.2命名管道的…

Partition架构

优质博文:IT-BLOG-CN Partition架构 【1】结构: Region至少3个Zone,Zone内至少两个Partition,Partition内至少1个K8S Member Cluster; 【2】故障域: 故障域及核心链路至少Zone内收敛,甚至Part…

C++ 复习记录(个人记录)

1、构造函数(constructor)是什么 答:类里面定义一个函数, 和类名一样, 这样在我们生成一个对象之后,就会默认调用这个函数,初始化这个类。 子类B继承父类A的情况, 当你调用子类的对…

vue3 Teleport的说明及用法

1、定义&#xff1a; https://cn.vuejs.org/guide/built-ins/teleport#basic-usage <Teleport> 是一个内置组件&#xff0c;它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。 2、基本用法&#xff1a;​ 有时我们可能会遇到这样的场景&am…

STM32HAL库定时器无法进入中断问题

HAL_TIM_Base_Start(): 该函数启动定时器但不会开启中断。它适用于不需要中断处理的定时器配置&#xff0c;仅用于定时器计数功能。使用它时&#xff0c;定时器会启动并在设置的周期内计数&#xff0c;但中断标志不会触发 CPU 中断。 HAL_TIM_Base_Start_IT(): 该函数不仅启动定…

在React项目中使用SpreadJS实现在线Excel表格功能

在React项目中使用SpreadJS实现在线Excel表格功能&#xff0c;可以让你的应用程序具备强大的表格编辑能力。以下是使用React和SpreadJS来创建一个在线Excel表格的基本步骤&#xff1a; 1. 初始化React项目 如果你还没有React项目&#xff0c;可以使用create-react-app脚手架快…

某小型CMS漏洞复现审计

SQL注入 漏洞复现&#xff1a; 登陆后台&#xff0c;点击页面删除按钮&#xff0c;抓包&#xff1a; rid参数存在sql注入&#xff0c;放入sqlmap检测成功&#xff1a; 代码分析&#xff1a; CtrlShiftF检索路由&#xff1a; 定位具体代码&#xff0c;为删除功能&#xff1a; …