---
updatedAt: 2026-01-22T11:10:32.000Z
---

# Wait for Element Script Function

These 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:**

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

[block:parameters]
{
  "data": {
    "h-0": "Parameter",
    "h-1": "Description",
    "0-0": "**selector**",
    "0-1": "Valid CSS selector identifying the DOM elements to look for",
    "1-0": "**callback**",
    "1-1": "Function to execute",
    "2-0": "**minElements**",
    "2-1": "Optional. Default: 1  \nminimum number of selected resources rendered before executing the function",
    "3-0": "**interval**",
    "3-1": "Optional. Default: 100  \nHow often the page is rechecked for the element (in milliseconds)",
    "4-0": "**maximumRetries**",
    "4-1": "Optional. Default: infinity  \nMaximum number of times to recheck the page for the element before giving up"
  },
  "cols": 2,
  "rows": 5,
  "align": [
    "left",
    "left"
  ]
}
[/block]

**Return:**\
None

**Examples:**

```javascript
//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 return a promise.

**Syntax:**

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

[block:parameters]
{
  "data": {
    "h-0": "Parameter",
    "h-1": "Description",
    "0-0": "**selector**",
    "0-1": "Valid CSS selector identifying the DOM elements to look for",
    "1-0": "**minElements**",
    "1-1": "Optional. Default: 1  \nminimum number of selected resources rendered before executing the function",
    "2-0": "**interval**",
    "2-1": "Optional. Default: 100  \nHow often the page is rechecked for the element (in milliseconds)",
    "3-0": "**maximumRetries**",
    "3-1": "Optional. Default: infinity  \nMaximum number of times to recheck the page for the element before giving up"
  },
  "cols": 2,
  "rows": 4,
  "align": [
    "left",
    "left"
  ]
}
[/block]

**Return:\
**None

**Examples:**

```javascript
//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:**

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

**Example:**

```javascript
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:**

```javascript
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)