оператор задержки

Оператор задержки используется для задержки эмиссии на заданный период времени.

Мы можем задержать эмиссию двумя типами значений.

  • Время задержки в миллисекундах
  • Задержка до указанной даты
const source$ = of(2,1,4).pipe(
delay(3000)
);
source$.subscribe(console.log); //prints 2 1 4 but after 3 seconds

Он подождет 3 секунды и напечатает, после чего начнется эмиссия. Обратите внимание, что он не будет ждать 3 секунды для каждого выпуска значения

Из приведенных выше мраморных диаграмм видно, что значения, проходящие через оператор задержки, задерживаются.

Обратите внимание на разницу между диаграммами, расстояние между первым и вторым излучаемыми значениями. Хорошо видно, что на обеих диаграммах эмиссия второго и третьего значений не изменилась.

Другими словами, оператор задержки будет задерживать поток, чтобы начать излучать, он не будет применять задержку к каждому излучению.

Задержка по дате

Вместо предоставления миллисекунд мы можем предоставить объект Date для задержки до этой даты.

const source$ = of(2,1,4).pipe(
delay(new Date(2021, 11, 9, 15, 45, 0, 0)));
source$.subscribe(console.log); 
//prints 2 1 4 at Dec 9th 2021, 3:45PM

оператор задержки при срабатывании

Оператор delayWhen будет задерживать эмиссию до тех пор, пока не будет сообщено другим наблюдаемым, вместо ожидания заранее определенного времени.

const timer$ = timer(3000); // emits after 3 seconds
const source$ = of(2, 1, 4)
.pipe(
delayWhen(() => timer$)
);
source$.subscribe(console.log); //prints 2 1 4 but after 3 seconds

Как вы видите, приведенный выше пример начинает выдавать значения через 3 секунды, но вместо того, чтобы предоставлять их как 3 секунды, мы позволили наблюдаемому таймеру определить, до какого момента его нужно отложить. Давайте посмотрим сценарий в реальном времени.

//html
// <button id="submit">submit</button>

const buttonSubmit = document.querySelector('#submit');
const buttonClick$ = fromEvent(buttonSubmit, 'click');
const source$ = of(2, 1, 4)
.pipe(
delayWhen(() => buttonClick$)
);
source$.subscribe(console.log); 
//prints 2 1 4 after submit button clicked

Как видите, исходный наблюдаемый объект ждал, пока наблюдаемый объект buttonClick не выдаст значение. Таким образом, при нажатии кнопки отправки исходный наблюдаемый объект начал выдавать значения.

Сводка

И задержка, и задержка при задержке начала эмиссии.

задержка — задержит начало эмиссии на заданную дату и время или на миллисекунды

delayWhen — Задерживает эмиссию до тех пор, пока другая зависимая наблюдаемая не выдаст значение.