Wait for Element Client-Side APIs

The following client-side APIs are designed to wait for different types of elements to load on a page before executing a function or returning a promise. 

Wait for CSS Element

Wait for an element on the page to load and then execute a function. 

Syntax

DYO.waitForElement (selector, callback, minElements, interval, maximumRetries)

Parameters:

• selector: valid css selector identifying the DOM elements to look for
• callback: function to execute
• minElements (optional, default: 1): minimum number of selected resources rendered before executing the function
• interval (optional, default: 100): how often the page will be rechecked for the elements (in milliseconds)
• maximumRetries (optional, default: Infinity): maximum number of rechecking the page for the elements before giving up

Return:
None

Examples:

//execute an alert on the page after the main page div (#main) was loaded; check every 100 milliseconds for 10 times.
DYO.waitForElement('#main', function() {
  alert('done')
}, 1, 100, 10)
 
// execute only after 6 article elements were loaded
DYO.waitForElement('.article', function() {
  alert('articles loaded')
}, 6)

Wait for CSS Element Asynchronously

Wait for an element on the page to load and then returns a promise. 

Syntax

DYO.waitForElementAsync (selector, minElements, interval, maximumRetries)

Parameters:

• selector: valid css selector identifying the DOM elements to look for
• minElements (optional, default: 1): minimum number of selected resources rendered before executing the function
• interval (optional, default: 100): how often the page will be rechecked for the elements (in milliseconds)
• maximumRetries (optional, default: Infinity): maximum number of rechecking the page for the elements before giving up

Return:
None

Examples:

//Checks if selector is on the page, then returns the number of elements in the cart

DYO.Q(DYO.waitForElementAsync("<selector>", 1, 10, 100)).then(function(elements) {
 return parseInt(elements[0].textContent);
});

//Returns true if selector is on the page, otherwise returns false after 100 tries

DYO.Q(DYO.waitForElementAsync("<selector>",1, 10, 100))
 .then(function() {
 return "True"; 
 }, function() {
 return "False";
 });

Wait for Dynamic Yield Script

Execute a function after the dynamic yield collection script is on the page and the DOMReady event has been fired. Can be used to wait for Dynamic Yield to load.

Syntax

DY.API('callback',<function>)

Example:

DY.API('callback', function() { console.log('Everything is ready!'); });

Wait for Event, PageView, or Exit Intent

Syntax:

DY.API ('sub', {on: '<condition>', callback: <function>)

Example:

DY.API('sub', {on: 'dy-event', callback: function(event, eventName, properties){
      console.log('Custom event fired (' + eventName + '), properties: ' + JSON.stringify(properties));
    }});

Execute a function when an event or pageview is registered, or when the user’s mouse is about to leave the page.

Available conditions:

• dy-pageview: triggered whenever DY.API(‘track_pageview’); is called
• dy-event: triggered when an event is fired
• dy-mouse-leave-doc: triggered a bit before the user’s mouse leaves the page (based on our heuristic)