Angular에서 sleep() 함수 구현
이 기사에서는 Angular에서 sleep() 기능을 구현하는 단계를 논의하고 제공합니다.
TypeScript의 sleep() 함수
Angular sleep() 기능은 앱을 더욱 유용하게 만드는 새로운 기능입니다. TypeScript에서 Angular sleep() 함수는 지정된 밀리초 동안 프로그램 실행을 일시 중지할 수 있습니다.
이 일시 중지는 응용 프로그램의 응답성을 높이고 불필요한 코드 실행을 중지할 수 있습니다. TypeScript의 sleep() 함수는 구문에서 JavaScript의 setTimeout() 및 setInterval() 함수와 유사하지만 작동 방식이 다릅니다.
작업 지연 프로세스는 종종 JavaScript의 기본 setTimeout() 또는 setInterval() 기능을 사용하여 수행됩니다. 그러나 이러한 기능은 성능 및 응답성 측면에서 단점이 있습니다.
따라서 Angular 팀은 sleep()이라는 이 함수의 버전을 도입했습니다.
Angular에서 sleep() 함수를 구현하는 단계
TypeScript에서 Angular sleep() 기능을 구현하는 단계를 살펴보겠습니다.
하지만 그 전에 RxJS 라이브러리를 가져와야 합니다. 이 라이브러리는 필수적이며 애플리케이션에서 사용할 수 있는 많은 기능을 가지고 있습니다.
그런 다음 sleep.ts라는 새 TypeScript 스크립트 파일을 만들고 다음 단계를 구현합니다.
- 필요한 모듈을 가져옵니다.
- Angular
sleep()기능을 구현합니다. - 기능을 테스트합니다.
- TypeScript 파일로 내보냅니다.
TypeScript 코드 예:
import { Component } from '@angular/core';
import { interval } from 'rxjs';
import { take } from 'rxjs/operators';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title: string;
ngOnInit() {
const delay = 1000;
this.sleep(delay)
.then(() => this.title = '1')
.then(() => this.sleep(delay))
.then(() => this.title += '2')
.then(() => this.sleep(delay))
.then(() => this.title += '3')
.then(() => this.sleep(delay))
.then(() => this.title += '4')
.then(() => this.sleep(delay))
.then(() => this.title += '5')
}
sleep(milliseconds: number) {
let resolve: { (): any; (value: unknown): void; };
let promise = new Promise((_resolve) => {
resolve = _resolve;
});
setTimeout(() => resolve(), milliseconds);
return promise;
}
}
위에서 언급한 코드의 라이브 데모를 확인하려면 여기를 클릭하십시오.
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook