타이프 스크립트 수면


136

Typescript를 사용하여 Angular 2에서 웹 사이트를 개발 중이며 thread.sleep(ms)기능 을 구현하는 방법이 있는지 궁금 합니다.

내 유스 케이스는 몇 초 후에 양식을 제출 한 후 사용자를 리디렉션하여 HTML 또는 자바 스크립트에서 매우 쉽지만 Typescript에서 수행하는 방법을 잘 모르겠습니다.

많은 감사합니다


8
Typescript는 JavaScript의 상위 집합입니다. JavaScript로 작성하면 TypeScript 솔루션이 있습니다.
JB 니 제트

답변:


203

TS에서 ES6 컴파일에 대해서만 지원되므로 ES5를 지원 하는 async/ await를 지원 하는 TypeScript 2.0을 기다려야합니다 .

다음을 사용하여 지연 기능을 만들 수 있습니다 async.

function delay(ms: number) {
    return new Promise( resolve => setTimeout(resolve, ms) );
}

그리고 전화 해

await delay(300);

await내부 async기능 만 사용할 수 있습니다 .

당신이 할 수 없다면 ( nodejs 응용 프로그램을 빌드한다고 가정 해보십시오 ), 코드를 익명 async함수에 넣으십시오 . 예를 들면 다음과 같습니다.

    (async () => { 
        // Do something before delay
        console.log('before delay')

        await delay(1000);

        // Do something after
        console.log('after delay')
    })();

TS 애플리케이션 예 : https://github.com/v-andrew/ts-template

OLD JS에서는 사용해야합니다

setTimeout(YourFunctionName, Milliseconds);

또는

setTimeout( () => { /*Your Code*/ }, Milliseconds );

그러나 모든 주요 브라우저를 지원 async/ 사용 await하지 않습니다.

업데이트 : TypeScript 2.1은 여기에 async/await있습니다.

PromisePromise를 기본적으로 사용할 수없는 ES5로 컴파일 할 때 구현 이 필요하다는 것을 잊지 마십시오 .


1
업데이트 : async / await 및 ES5 / ES3 생성기 지원 이 TypeScript 2.1로 이동
v-andrew

8
기다리지 않고 이벤트를 수행하면 delay (20000)를 수행 할 수 있습니다 .then (() => {
ZZZ

1
어떤 이유로 이것은 나에게 효과가 await new Promise(resolve => setTimeout(resolve, 1000)).then(()=>console.log("fired"));없었지만 이것은 효과가 있었다await new Promise(resolve => setTimeout(()=>resolve(), 1000)).then(()=>console.log("fired"));
fjch1997

@ fjch1997, async함수로 감싸십시오 . 예를 추가했습니다
v-andrew

2
'지연'함수의 선언은 이미 약속을 반환하므로 비동기 키워드가 필요하지 않습니다.
SlavaSt

91

이것은 작동합니다 : (주석 덕분에)

setTimeout(() => 
{
    this.router.navigate(['/']);
},
5000);

1
나는 이것이 단순성을 위해 지금까지 받아 들여진 대답이어야한다고 생각합니다.
표시 이름

1
@StefanFalk 안녕하세요 스테판. 나는이 답변이 포함되어 있고 다른 사람들이 관심을 가질 수있는 지연을 수행하는 다른 "유형"방법이 있었기 때문에 다른 답변을 받아 들였습니다. 이 특정 작업에 async / await를 사용하면 아무런 이점이 없기 때문에 코드 전체 에서이 코드를 개인적으로 사용하고 있지만 TS 순수 주의자가 아니므로 더 쉽고 읽기 쉬운 항목을 사용하므로 동의합니다. 원칙적으로 :).
kha

31

어떤 이유로 위에 허용 된 답변이 새로운 버전의 Angular (V6)에서는 작동하지 않습니다.

그 사용을 위해 ..

async delay(ms: number) {
    await new Promise(resolve => setTimeout(()=>resolve(), ms)).then(()=>console.log("fired"));
}

위의 나를 위해 일했다.

용법:

this.delay(3000);

또는 더 정확한 방법

this.delay(3000).then(any=>{
     //your task after delay.
});

'1000'을 ms 매개 변수 호출로 바꾸면 완벽합니다.
greenskin

15

RxJS:

import { timer } from 'rxjs';

// ...

timer(your_delay_in_ms).subscribe(x => { your_action_code_here })

x 0입니다.

에 두 번째 인수 period를 주면 밀리 초 timer마다 새 숫자가 생성됩니다 period(x = 0, x = 1, x = 2, ...).

자세한 내용은 공식 문서 를 참조하십시오.


3
이러한 관점에 대한 감사는 "관찰 방법"찾아 여기 온
user230910을

0

angular5 이상을 사용하는 경우 ts 파일에 아래 방법을 포함하십시오.

async delay(ms: number) {
    await new Promise(resolve => setTimeout(()=>resolve(), ms)).then(()=>console.log("fired"));
}

그런 다음 원하는 곳 에서이 delay () 메소드를 호출하십시오.

예 :

validateInputValues() {
    if (null == this.id|| this.id== "") {
        this.messageService.add(
            {severity: 'error', summary: 'ID is Required.'});
        this.delay(3000).then(any => {
            this.messageService.clear();
        });
    }
}

3 초 후에 으르렁 거리는 메시지가 사라집니다.


0
import { timer } from 'rxjs';

await timer(1000).take(1).toPromise();

이것은 나를 위해 더 잘 작동합니다


'take'속성이 'Observable <number>'유형에 없습니다.
Anton Duzenko

'rxjs / operators'에서 import {take};
FabioLux

-3

또는 함수를 선언하는 대신 간단히 다음을 수행하십시오.

setTimeout(() => {
    console.log('hello');
}, 1000);

왜 기능이 아닌가?
Naveen Kumar
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.