0

Estou usando esse script para verificar o suporte a imagens webp mas estou tendo problemas ao definir o tipo, eis o código que faz a verificação:

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);

Mas quando chamo a variável tipo fora dessa função a mesma é dada como undefined.

Já tentei criar ela assim window.tipo mas também não funcionou, como posso resolver esse problema?

1 Resposta 1

3

... Quando chamo a variável tipo fora dessa função a mesma é dada como undefined.

O problema não é a variável ser global ou não, mas sim o momento em que o valor dela é atribuído. Não adianta querer capturar o valor de uma variável definida globalmente no mesmo instante, sendo que você define valores nela através de eventos assíncronos.

Para o melhor entendimento, é necessário que você entenda que a promessa é assíncrona e, portanto, os valores não são definidos imediatamente no escopo global, mas depois de um determinado tempo.

A minha solução para tal caso seria utilizando um callback para poder obter corretamente o valor que você está definindo em tipo.

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


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

A vantagem do callback é que ele executará as funcionalidades apenas quando for chamado dentro do resultado da promessa.

O seu problema é praticamente o mesmo descrito nessa pergunta:

Já tentei criar ela assim window.tipo mas também não funcionou

Não tem porque você guardar isso numa variável global, já que a definição do valor da mesma está sendo executado em escopo que está "em outra linha do tempo".

Reforço que a melhor solução em seu caso é tentar trabalhar com callbacks que possam ser chamado independe do tempo que de requisições dos processos assíncronos.

3
  • Quando no meu script poderei definir o tipo de imagem a ser usada? Pelo que entendi aqui mesmo com sua sugestão, se eu chamar a variável 'tipo' em algum lugar do script, continua como undefined
    – Leo Letto
    Commented 7/04/2017 às 16:46
  • @LeoLetto aí precisa avaliar o cenário. Mas com certeza, não é com variáveis globais que se resolvem o problema, visto que seu estado vai depender da execução de outros recursos assíncronos. Commented 7/04/2017 às 16:51
  • É que quero fazer isso para verificar que tipo de imagem devo usar, tais imagens serão adicionadas ao site através de um loop, por isso achei que seria possível, mas como é uma chamada assíncrona, acho que vale mais a pena eu trabalhar com essa detecção direto no htaccess, ou no próprio PHP durante o carregamento da página
    – Leo Letto
    Commented 7/04/2017 às 16:54

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .