js实现异步和延时

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

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:

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:

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:

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:

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:

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