说明:最近碰到几个需求,
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