Skip to content

[FEATURE] Add Timeout Option for Mutation Observer #4

@AndrewBarber

Description

@AndrewBarber

Is your feature request related to a problem? Please describe.
Currently, mutationReady will continue watching for elements indefinitely. In some cases, we might want to stop watching after a certain time period if the element hasn't appeared, to prevent memory leaks or handle error cases.

Describe the solution you'd like
Add timeout options to the existing options parameter:

interface MutationReadyOptions {
  removeExisting?: boolean;
  timeout?: number;  // Time in milliseconds before stopping observation
  onTimeout?: () => void;  // Optional callback when timeout occurs
}

// Function signature remains consistent
function mutationReady(
  selector: string,
  callback: (element: Element) => void,
  options?: MutationReadyOptions
): void;

Example Usage

// With timeout and error handling
mutationReady('.dynamic-content', (element) => {
  console.log('Element found:', element);
}, {
  timeout: 3000,
  onTimeout: () => {
    console.warn('Content did not load within 3 seconds');
    // Handle the timeout case
  }
});

// Current behaviour (watch indefinitely)
mutationReady('.element', callback);

Additional context
This would be particularly useful in:

  • Loading states where elements should appear within a known timeframe
  • Error handling for missing or delayed content
  • Preventing memory leaks in long-running SPAs

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions