How to Delay The Execution of JavaScript without a plugin

Delaying the execution of a piece of code means that it will not run immediately when the program is executed, but will be scheduled to run at a later time.

The first time I heard about the execution of JavaScript was when I was playing with Flying Scripts.

Then WPRocket, Perfmatters, and other plugins added similar features to their plugins.

If you don’t want to use a plugin to delay the execution of JavaScript, you can use the following code taken from the Flying Scripts Plugin.

Code to Delay JavaScript

This is the code that you have to insert into your website footer or header to delay internal and external scripts.

This is the unminified version of the script:

<script>
    const loadScriptsTimer = setTimeout(loadScripts, 5 * 1000);
    const userInteractionEvents = ["mouseover", "keydown", "touchstart", "touchmove", "wheel"];
    userInteractionEvents.forEach(function (event) {
        window.addEventListener(event, triggerScriptLoader, { passive: !0 });
    });
    function triggerScriptLoader() {
        loadScripts();
        clearTimeout(loadScriptsTimer);
        userInteractionEvents.forEach(function (event) {
            window.removeEventListener(event, triggerScriptLoader, { passive: !0 });
        });
    }
    function loadScripts() {
        document.querySelectorAll("script[data-type='lazy']").forEach(function (elem) {
            elem.setAttribute("src", elem.getAttribute("data-src"));
        });
    }
</script>

This is the minified version of the script:

<script> const loadScriptsTimer=setTimeout(loadScripts,5*1000);const userInteractionEvents=["mouseover","keydown","touchstart","touchmove","wheel"];userInteractionEvents.forEach(function(event){window.addEventListener(event,triggerScriptLoader,{passive:!0})});function triggerScriptLoader(){loadScripts();clearTimeout(loadScriptsTimer);userInteractionEvents.forEach(function(event){window.removeEventListener(event,triggerScriptLoader,{passive:!0})})}
function loadScripts(){document.querySelectorAll("script[data-type='lazy']").forEach(function(elem){elem.setAttribute("src",elem.getAttribute("data-src"))})}</script>

Examples

These are some examples that show how to wrap the scripts.

If you use Optad360, this is how you delay both scripts:

<script async data-type="lazy" data-src="//get.optad360.io/sf/66de3669-901a-4936-acaf-aca945c17acb/plugin.min.js"></script>

<script async data-type="lazy" data-src="//cmp.optad360.io/items/c554b8cd-d417-4f47-bb44-858e45a171a7.min.js"></script></head>

If you want to delay a theme script, you have to dequeue the script and let the Flying Scripts code load after the time you specified.

<script data-type="lazy" data-src="https://wpsurfer.com/wp-content/themes/generatepress/assets/js/menu.min.js?ver=3.2.4"></script>

More Code Snippets

You might want to check some of these posts before you leave

1. Add Reusable Blocks to Admin Menu
2. How to Stop WordPress From Guessing URLs
3. GeneratePress Hooks: Simple Guide
4. Removing and Redirecting Query Strings
5. How To Remove the Category From the WordPress URL
6. How to Limit WordPress Post Revisions
7. How to Disable Heartbeat in WordPress