Wait for an element to exist. ES6, Promise, MutationObserver

100%

Wait for an element to exist. ES6, Promise, MutationObserver

✓ Published0🌍 Public

Last edited Oct 26, 2020

Created on Oct 26, 2020

This example demonstrates a utility for resolving race conditions in web applications by waiting until an element matching a given selector exists in the DOM, then returning a promise that resolves with that element. The code uses native ES6 Promises and the MutationObserver API to monitor the document’s root element for child list and subtree changes. When the target element appears, the observer disconnects and the promise resolves, allowing actions like removing the widget. The accompanying usage example shows how to delete `#someWidget` once it is present.

AI-generated description

Similar vizzes

Loading thumbnail…

basic DOM Ready

This example demonstrates a lightweight DOM-ready utility that detects when the document is fully loaded and executes registered callback functions. It handles browser-specific quirks by using `document.addEventListener` for Mozilla and Opera, a `doScroll` check for Internet Explorer, and a stylesheet-counting fallback for Safari. The code exposes a `DomReady.ready` method to queue functions, running them immediately if the DOM is already ready or deferring them otherwise. A final fallback ensures `window.onload` triggers the pending callbacks.

Aalessioalex

59% match

Loading thumbnail…

Gist 5bc89f176a762b6fc64a

This example demonstrates the MutationObserver API monitoring changes to a DOM element. The code observes a target node (referenced via `$0`) with a configuration that tracks child list, attribute, and character data mutations across the entire subtree, including old values. When mutations occur, the observer logs each change to the console, grouping observations by a random numeric identifier and printing the target node’s name and mutation type. The visualization relies on browser-native console grouping and logging, with no external data source or rendering library involved.

Aalessioalex

58% match

Loading thumbnail…

A utility function, for Greasemonkey scripts, that detects and handles AJAXed content.

The animation shows the recursive polling logic of the `waitForKeyElements` utility, which scans for AJAX-injected DOM nodes matching a jQuery selector. It displays the function’s timer-driven loop, where `setInterval` repeatedly checks for target nodes every 300 milliseconds, invoking the callback action on newly discovered elements. The visualization highlights how the function tracks already-processed nodes using jQuery’s `.data()` method and manages its control object to clear or reset timers based on the `bWaitOnce` flag. The code relies on jQuery selectors and traversal methods, with optional iframe support via `.contents().find()`.

Aanemochore

57% match

Loading thumbnail…

HTML Starter

This example displays the text “Promise Test” in large, centered type using basic HTML and CSS styling. It demonstrates JavaScript Promise usage in a minimal page context, logging “Hello JavaScript!” to the console on load and resolving a delayed Promise after two seconds. A second Promise, created with setTimeout, logs a message after five seconds. The code uses vanilla JavaScript’s Promise API alongside the console.log method, with no external libraries or data sources.

JJames Song

54% match

Loading thumbnail…

Synopsis

This example shows a DOM element’s CSS style properties being monitored for changes, logging each modification with its old and new values. It demonstrates both a single-property listener and a multi-property change handler. The code uses Backbone.Events for event handling, MutationObserver to detect style attribute mutations, and Underscore for utility functions. The demo binds to `transform-origin` and `border-radius` on a div, then programmatically updates `transform-origin` after one second, triggering the change callbacks.

Aabernier

53% match

Loading thumbnail…

React Starter

This example demonstrates a minimal React setup where a plain-text "Hello World" message is rendered into a DOM element using vanilla JavaScript, while the React library is loaded but its rendering path remains commented out. The code also illustrates JavaScript promises, including a `waitSeconds` function that resolves after a specified delay using `setTimeout`. React 16.10.0 and ReactDOM are loaded via UMD builds from unpkg, with the page structure defined in `index.html`.

Ssignupexx

53% match

Loading thumbnail…

promise

This example demonstrates the use of native JavaScript Promises within a D3.js v5 visualization. It logs a message to the console and returns a Promise that resolves, showcasing asynchronous control flow alongside a simple HTML page. The code loads D3 from UNPKG, uses an ES6 module for a text message, and renders the message "Hello VizHub!" in large centered text via CSS styling. The visualization highlights how Promises integrate with D3’s event-driven environment.

Ppei9223

53% match

Loading thumbnail…

D3 Starter - Asynchronus

This example demonstrates asynchronous programming in JavaScript using Promise objects and the `setTimeout` API, showing how to handle operations that take time to complete. The code defines a `waitSeconds` function that returns a Promise resolving after a specified delay, then chains `.then()` to log a message once the time has elapsed. Using D3 v6 loaded from a CDN, the page includes explanatory text about asynchronous versus synchronous behavior, with no data visualization or rendering involved—the focus is purely on illustrating the callback and Promise patterns.

Mmaxthamt

52% match