JS: How to prevent race condition?

manpreet Best Answer 3 years ago

My task is to improve the performance on an existing WordPress site therefore I installed cache and a race condition started happening.

This is the site. The full code is here, it doesn't fit in the editor, on line 474 there's this function

function loaded() {
    var e = $("#content-wrap").attr("data-classes");
    if ($("body").attr("class", e), $("#news-slider").length) {
        var t = $("#news-slider").attr("data-timer");
        $("#news-slider").slick({
            dots: !1,
            autoplay: !0,
            speed: 800,
            autoplaySpeed: t,
            fade: !0,
            cssEase: "linear",
            prevArrow: "",
            nextArrow: ""
        })
    }

...

this line

$("#news-slider").slick({

gives slick not defined, sometimes, again it's a race condition. Sometimes an error in another function below it, the problem starts from loaded() function and below. Now I stopped caching the file and the homepage, where the file is loaded, the problem persists.

If I use $(window).load(function() either on the entire file or just this function, the homepage would be messed up, no errors would be visible in console though.

If I use $(document).ready(function() either on the entire file or just this function, the slider on mobile would be messed up, no errors would be visible in console though.

If I set a timer to delay the execution of the script, it wouldn't solve anything.