---
title: Fix a timing issue
slug: web-experimentation/docs/fc1v-fix-a-timing-issue
docTags: 
createdAt: 2026-07-20T15:45:28.047Z
---

- Optimizely Web Experimentation
- Optimizely Performance Edge

Not every web page loads all content on a page at the same time. Sometimes, some of the content on a page may depend on an AJAX requestor may be automatically loaded after some delay following the initial page load. If an element does not exist on a page when Optimizely Web Experimentation and Optimizely Performance Edge's variation code tries to change it, the change may not occur. This is a timing issue.

If you see a timing issue, you also see *variation code load as expected in the editor, but not on your live site*. 

To fix timing issues, instruct Optimizely Web Experimentation and Optimizely Performance Edge to both wait until the element is loaded on the page *before* changing it, and hide the element until Optimizely Web Experimentation and Optimizely Performance Edge can make the change. 

1. Go to the experiment or campaign, select a variation, and click **Variation Code Editor** (icon).
2. Select **JavaScript** to add custom code.

   ![timing-1.png](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/--XheOIEZuS7kBiO4Odbm-20260720-150122.png)

:::Paragraph{indent="1"}
Use the following utilities to adjust the timing of your variation code, or find more utilities in the [developer docs](docId\:KDYPsqDLyn7OChXiSFLee).
**Control variation code timing with waitForElement**
:::

```javascript
utils.waitForElement(selector);
```

:::Paragraph{indent="1"}
Use the `waitForElement` function to wait for an element before executing the variation code. The `waitForElement` function waits for the element's opening *and* closing tag before executing the variation code. For example, if you wait for `body`, `waitForElement` waits for the opening *and* closing body tag before executing. This runs just once, when the element is found.
**Control variation code timing with observeSelector**
:::

```javascript
utils.observeSelector(selector, callback, options);
```

:::Paragraph{indent="1"}
The `observeSelector `function uses DOM mutation observers to constantly check if an element has changed and run the variation code when a change is detected. This is useful for dynamic content and SPAs, but it is [not compatible with all browsers](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).
:::

To see an example using a utility, click **Help** (icon) below the **Variation Code Editor** window.

See also [what jQuery is and how Optimizely Web Experimentation and Optimizely Performance Edge use it](docId\:tSAlch_bkJtpyxCiYpCzO), and how to [manually find selectors on your page](docId\:tSAlch_bkJtpyxCiYpCzO).