Skip to main content

​
Overview

Emits a value from the source Observable, then ignores subsequent source values for duration milliseconds, then repeats this process.
throttleTime emits the source Observable values on the output Observable when its internal timer is disabled, and ignores source values when the timer is enabled.

​
Type Signature

interface ThrottleConfig {
  leading?: boolean;
  trailing?: boolean;
}

function throttleTime<T>(
  duration: number,
  scheduler: SchedulerLike = asyncScheduler,
  config?: ThrottleConfig
): MonoTypeOperatorFunction<T>

​
Parameters

​
duration
number
required
Time to wait before emitting another value after emitting the last value, measured in milliseconds or time unit determined by the optional scheduler.
​
scheduler
SchedulerLike
default:"asyncScheduler"
The SchedulerLike to use for managing the timers that handle the throttling.
​
config
ThrottleConfig
Configuration object to define leading and trailing behavior. Defaults to { leading: true, trailing: false }.

​
Returns

MonoTypeOperatorFunction<T> - A function that returns an Observable that performs the throttle operation to limit the rate of emissions from the source.

​
Usage Examples

​
Basic Example: Limit Click Rate

import { fromEvent, throttleTime } from 'rxjs';

const clicks = fromEvent(document, 'click');
const result = clicks.pipe(throttleTime(1000));

result.subscribe(x => console.log(x));
// Emits at most one click per second

​
With Leading and Trailing

import { fromEvent, throttleTime } from 'rxjs';

const clicks = fromEvent(document, 'click');
const result = clicks.pipe(
  throttleTime(1000, undefined, { leading: true, trailing: true })
);

result.subscribe(x => console.log(x));
// Emits first AND last click in each 1-second window

​
Scroll Handler

import { fromEvent, throttleTime } from 'rxjs';

const scrolls = fromEvent(window, 'scroll');
const throttled = scrolls.pipe(
  throttleTime(200)
);

throttled.subscribe(() => {
  console.log('Scroll event (throttled)');
  updateScrollPosition();
});

​
When to Use

​
Use throttleTime when:

  • You want to limit event frequency to a fixed rate
  • You need the first value in each time window
  • Handling rapid UI events (clicks, scrolls, resizes)
  • Implementing rate limiting for API calls

​
Don’t use throttleTime when:

  • You want the last value (use auditTime instead)
  • You need dynamic duration (use throttle instead)
  • You want to wait for silence (use debounceTime instead)

​
Comparison with Similar Operators

OperatorEmitsDuration
throttleTimeFirst value in windowFixed time
auditTimeLast value in windowFixed time
throttleFirst value in windowDynamic (from Observable)
debounceTimeLast value after silenceFixed time
  • throttle - Same behavior but with dynamic duration
  • auditTime - Emits last value instead of first
  • debounceTime - Waits for silence before emitting
  • sampleTime - Samples at fixed intervals
  • audit - Like throttle but emits last value