How to make this variable global?

Question

I am using this script to check image support webp but I’m having trouble defining the type, here’s the code that checks:

hasWebP = (function() {
    var images = {
        basic: "data:image/webp;base64,UklGRjIAAABXRUJQVlA4ICYAAACyAgCdASoCAAEALmk0mk0iIiIiIgBoSygABc6zbAAA/v56QAAAAA==",
        lossless: "data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAQAAAAfQ//73v/+BiOh/AAA="
    };

    return function(feature) {
        var deferred = $.Deferred();

        $("<img>").on("load", function() {
            if(this.width === 2 && this.height === 1) {
                deferred.resolve();
            } else {
                deferred.reject();
            }
        }).on("error", function() {
            deferred.reject();
        }).attr("src", images[feature || "basic"]);

        return deferred.promise();
    }
})();

hasWebP().then(function() {
    tipo = "webp";
}, function() {
    tipo = "jpg";
});
console.log(tipo);

But when I call the variable tipo outside this function it is given as undefined.

I’ve tried to raise her like this window.tipo but it didn’t work either, how can I solve this problem?

Answer 1

... When I call the type variable outside of this function it is given as undefined.

The problem is not whether the variable is global or not, but when its value is assigned. It is no use to want to capture the value of a globally defined variable at the same instant, and you define values in it through asynchronous events.

For the best understanding, it is necessary that you understand that the promise is asynchronous and therefore the values are not defined immediately in the overall scope, but after a certain time.

My solution to such a case would be to use a callback to be able to correctly obtain the value you are setting in tipo.

function usarTipo(tipo) {
     console.log(tipo);
}


hasWebP().then(function() {
     usarTipo("webp");
}, function() {
    usarTipo("webp");
});

The advantage of callback is that it will run the features only when called within the promise result.

Your problem is pretty much the same as described in this question:

• Variable loses value after leaving Promisse

I’ve tried to create it like this window.type but it also didn’t work

There is no reason to store this in a global variable, since the value definition of the variable is being executed in scope that is "in another timeline".

Reinforcement that the best solution in your case is to try to work with callbacks that can be called independent of the time of the requests of asynchronous processes.