How to delay a js script loading

Question

One of my community modules is creating issues due to the fact he is loading too fast. When he is loading, the dom is not fully loaded yet.

From : vendor/alma/alma-monthlypayments-magento2/view/frontend/web/js/view/catalog/badge.js

var qtyNode = document.getElementById('qty');
qtyNode.addEventListener("input",function(){updateWidget()});

This is triggering cannot read property of null.

Any idea how to prevent this js file from loading while the dom isn't fully loaded ?

Answer 1

You can wrap the JS in a define which includes domReady as below maybe?

define([
    'domReady'
], function (domReady) {
    domReady(function () {
        
        var qtyNode = document.getElementById('qty');
        qtyNode.addEventListener("input",function(){updateWidget()});

    });
});

Answer 2

You can add domReady! dependency to define to delay code execution until DOM will be ready

define([
    'domReady!'
], function () {
    var qtyNode = document.getElementById('qty');
    qtyNode.addEventListener("input",function(){updateWidget()});

});