함수: injectThrottledValue()

호출 시그니처

function injectThrottledValue<TValue, TSelected>(
   value, 
   initialOptions, 
selector?): ThrottledSignal<TValue, TSelected>;

정의 위치: angular-pacer/src/throttler/injectThrottledValue.ts:75

지정된 시간 창 안에서 최대 한 번 업데이트되는 스로틀 값을 생성하는 Angular 함수입니다. injectThrottledSignal과 달리 이 함수는 입력 시그널의 변경을 자동으로 추적하고 그에 따라 스로틀 값을 업데이트합니다.

스로틀 값은 입력 값의 변경 빈도와 관계없이 지정된 대기 시간 안에 최대 한 번 업데이트됩니다.

자주 변경되는 시그널에서 스로틀 값을 파생할 때 유용합니다. 스크롤 위치나 마우스 좌표처럼 후속 이펙트 또는 계산의 실행 빈도를 제한하려는 경우에 적합합니다.

이 함수는 다음 요소를 포함하는 스로틀 시그널 객체를 반환합니다.

• 현재 스로틀 값을 제공하는 Signal
• 제어 메서드를 제공하는 스로틀러 인스턴스

상태 관리와 셀렉터

이 함수는 내부 스로틀러 인스턴스를 통해 TanStack Store로 반응형 상태를 관리합니다. selector 매개변수로 어떤 스로틀러 상태 변경이 시그널 업데이트를 트리거할지 지정할 수 있으며, 관련 없는 상태가 변경될 때 불필요한 구독을 방지하여 성능을 최적화합니다.

기본적으로 반응형 상태 구독은 없습니다. 반응형 상태를 추적하려면 셀렉터 함수를 제공하여 명시적으로 활성화해야 합니다. 이를 통해 불필요한 업데이트를 방지하고 컴포넌트가 상태 변경을 추적할 시점을 완전히 제어할 수 있습니다.

사용할 수 있는 스로틀러 상태 속성은 다음과 같습니다.

• canLeadingExecute: 스로틀러가 선행 에지에서 실행될 수 있는지 여부
• canTrailingExecute: 스로틀러가 후행 에지에서 실행될 수 있는지 여부
• executionCount: 완료된 함수 실행 횟수
• isPending: 스로틀러가 타임아웃 후 실행되기를 기다리고 있는지 여부
• lastArgs: 가장 최근 maybeExecute 호출에 전달된 인수
• lastExecutionTime: 마지막 실행의 타임스탬프
• nextExecutionTime: 다음 실행이 허용되는 시점의 타임스탬프
• status: 현재 실행 상태('disabled' | 'idle' | 'pending')

타입 매개변수

TValue

TValue

TSelected

TSelected = { }

매개변수

value

Signal<TValue>

initialOptions

ThrottlerOptions<Setter<TValue>>

selector?

(state) => TSelected

반환값

ThrottledSignal<TValue, TSelected>

예시

// Default behavior - no reactive state subscriptions
const scrollY = signal(0)
const throttledScrollY = injectThrottledValue(scrollY, {
  wait: 100, // Update at most once per 100ms
})

// Opt-in to reactive updates when pending state changes
const throttledScrollYWithState = injectThrottledValue(
  scrollY,
  { wait: 100 },
  (state) => ({ isPending: state.isPending }),
)

// Read the throttled signal value
effect(() => {
  updateUI(throttledScrollY())
})

// Access throttler state via the returned object's state() signal
console.log('Is pending:', throttledScrollYWithState.state().isPending)

// Control the throttler
throttledScrollY.cancel() // Cancel any pending updates

호출 시그니처

function injectThrottledValue<TValue, TSelected>(
   value, 
   initialValue, 
   initialOptions, 
selector?): ThrottledSignal<TValue, TSelected>;

정의 위치: angular-pacer/src/throttler/injectThrottledValue.ts:80

지정된 시간 창 안에서 최대 한 번 업데이트되는 스로틀 값을 생성하는 Angular 함수입니다. injectThrottledSignal과 달리 이 함수는 입력 시그널의 변경을 자동으로 추적하고 그에 따라 스로틀 값을 업데이트합니다.

스로틀 값은 입력 값의 변경 빈도와 관계없이 지정된 대기 시간 안에 최대 한 번 업데이트됩니다.

자주 변경되는 시그널에서 스로틀 값을 파생할 때 유용합니다. 스크롤 위치나 마우스 좌표처럼 후속 이펙트 또는 계산의 실행 빈도를 제한하려는 경우에 적합합니다.

이 함수는 다음 요소를 포함하는 스로틀 시그널 객체를 반환합니다.

• 현재 스로틀 값을 제공하는 Signal
• 제어 메서드를 제공하는 스로틀러 인스턴스

상태 관리와 셀렉터

이 함수는 내부 스로틀러 인스턴스를 통해 TanStack Store로 반응형 상태를 관리합니다. selector 매개변수로 어떤 스로틀러 상태 변경이 시그널 업데이트를 트리거할지 지정할 수 있으며, 관련 없는 상태가 변경될 때 불필요한 구독을 방지하여 성능을 최적화합니다.

기본적으로 반응형 상태 구독은 없습니다. 반응형 상태를 추적하려면 셀렉터 함수를 제공하여 명시적으로 활성화해야 합니다. 이를 통해 불필요한 업데이트를 방지하고 컴포넌트가 상태 변경을 추적할 시점을 완전히 제어할 수 있습니다.

사용할 수 있는 스로틀러 상태 속성은 다음과 같습니다.

• canLeadingExecute: 스로틀러가 선행 에지에서 실행될 수 있는지 여부
• canTrailingExecute: 스로틀러가 후행 에지에서 실행될 수 있는지 여부
• executionCount: 완료된 함수 실행 횟수
• isPending: 스로틀러가 타임아웃 후 실행되기를 기다리고 있는지 여부
• lastArgs: 가장 최근 maybeExecute 호출에 전달된 인수
• lastExecutionTime: 마지막 실행의 타임스탬프
• nextExecutionTime: 다음 실행이 허용되는 시점의 타임스탬프
• status: 현재 실행 상태('disabled' | 'idle' | 'pending')

타입 매개변수

TValue

TValue

TSelected

TSelected = { }

매개변수

value

Signal<TValue>

initialValue

TValue

initialOptions

ThrottlerOptions<Setter<TValue>>

selector?

(state) => TSelected

반환값

ThrottledSignal<TValue, TSelected>

예시

// Default behavior - no reactive state subscriptions
const scrollY = signal(0)
const throttledScrollY = injectThrottledValue(scrollY, {
  wait: 100, // Update at most once per 100ms
})

// Opt-in to reactive updates when pending state changes
const throttledScrollYWithState = injectThrottledValue(
  scrollY,
  { wait: 100 },
  (state) => ({ isPending: state.isPending }),
)

// Read the throttled signal value
effect(() => {
  updateUI(throttledScrollY())
})

// Access throttler state via the returned object's state() signal
console.log('Is pending:', throttledScrollYWithState.state().isPending)

// Control the throttler
throttledScrollY.cancel() // Cancel any pending updates