Освоение функций задержки в TypeScript: подробное руководство

В современной веб-разработке асинхронное программирование играет решающую роль в создании адаптивных и эффективных приложений. Одним из общих требований является введение задержек при выполнении кода. TypeScript, являющийся расширенной версией JavaScript, предоставляет несколько подходов к реализации функций задержки. В этой статье мы рассмотрим различные методы создания задержек в TypeScript с примерами кода и разговорными пояснениями.

Метод 1: setTimeout()
Функция setTimeout() — это встроенный метод JavaScript, который также можно использовать в TypeScript. Он планирует выполнение функции через заданный интервал времени, измеряемый в миллисекундах. Вот пример:

function delay(milliseconds: number): Promise<void> {
  return new Promise<void>((resolve) => {
    setTimeout(resolve, milliseconds);
  });
}
// Usage
async function runDelayedCode() {
  console.log("Start");
  await delay(2000);
  console.log("Delayed code executed");
}
runDelayedCode();

Метод 2: промисы с помощью setTimeout()
Объединив промисы и setTimeout(), мы можем создать более гибкие функции задержки. Вот пример:

function delay(milliseconds: number): Promise<void> {
  return new Promise<void>((resolve) => {
    setTimeout(resolve, milliseconds);
  });
}
// Usage
async function runDelayedCode() {
  console.log("Start");
  await delay(2000);
  console.log("Delayed code executed");
}
runDelayedCode();

Метод 3: async/await с помощью setTimeout()
Если вы предпочитаете работать с async/await, вы можете использовать метод util.promisify() в Node.js для преобразования setTimeout() в обещание. Вот пример:

import { promisify } from "util";
const delay = promisify(setTimeout);
// Usage
async function runDelayedCode() {
  console.log("Start");
  await delay(2000);
  console.log("Delayed code executed");
}
runDelayedCode();

Метод 4: Observables RxJS
Если вы работаете с реактивным программированием и используете RxJS, вы можете использовать Observables для введения задержек. Вот пример:

import { Observable } from "rxjs";
import { delay } from "rxjs/operators";
// Usage
function runDelayedCode() {
  console.log("Start");
  const observable = new Observable((observer) => {
    observer.next();
    observer.complete();
  }).pipe(delay(2000));
  observable.subscribe(() => {
    console.log("Delayed code executed");
  });
}
runDelayedCode();

В этой статье мы рассмотрели несколько методов реализации функций задержки в TypeScript. Мы рассмотрели традиционный подход setTimeout(), промисы с помощью setTimeout(), async/await с помощью setTimeout() и использование наблюдаемых RxJS. В зависимости от требований вашего проекта и стиля кодирования вы можете выбрать метод, который подходит вам лучше всего. Освоив функции задержки, вы получите больший контроль над временем выполнения кода в приложениях TypeScript, что приведет к более плавному и эффективному взаимодействию с пользователем.