0

Estou construindo uma página que possui um carrossel (com bootstrap 4) que exibe algumas informações sobre temperaturas. Essas informações vem de um XML que será atualizado sempre que ocorrer alguma mudança.

Estou fazendo os testes alterando o arquivo XML manualmente, mas não consigo visualizar as alterações. Já tentei o setTimeout e o setInterval (o setInterval repete todo o bloco HTML) e não conseguir visualizar as alterações, parece que no caso do setTimeout, ele não carrega o XML novamente.

Alguém poderia me ajudar a desvendar este mistério? Agradeço desde já pela atenção :)

Código:

function temperatures() {
    'use strict';
    $.get('temperature.xml', function (data) {
        $(data).find('temperature').each(function () {
            let $temperature = $(this);
            let type = $temperature.find('type').text();
            let value = $temperature.find('value').text();

            let temperatures = '<div class="carousel-item temperature">';
            temperatures += '<span class="sensor-value">' + value + '</span>';
            temperatures += '<span class="sensor-title">' + type + '</span>';
            temperatures += '</div>';

            $('.temperatures').append($(temperatures));
        });
    });
    setTimeout(temperatures, 1000);
}

$(function () {
    temperatures();
});
1
  • 1
    setTimeout é uma "pausa", ele só executa uma vez. Já o setInterval, ele cria um intervalo que se repetirá infinitas vezes. Verifique se não é problema com "cache". 19/02/2018 às 16:39

1 Resposta 1

0

setTimeout serve como uma "pausa", ele executa apenas uma vez, no tempo programado. Já o setInterval, ele cria um intervalo que se repetirá infinitas vezes (ou até você utilizar o comando clearInterval()).

Como você quer apenas os novos resultos (e não repetir os mesmos), é necessário criar um ID único para cada valor. Dessa forma você consegue verificar, através do ID, se o valor é novo ou repetido.

Exemplo:

<div class="temperatures"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
    function temperatures() {
        'use strict';
        $.get('xml.xml', function (data) {
            $(data).find('temperature').each(function () {
                let $temperature = $(this);
                let type = $temperature.find('type').text();
                let value = $temperature.find('value').text();

                /* Converte para base64 e remove o sinal de igual */
                let id = btoa(value).replace(/=/g, "")

                /**
                 * Verifica se a div com o ID já existe,
                 * caso já exista, ignora. Caso contrário,
                 * adiciona na tela.
                 */
                if (! $("div#"+id).length ) {
                    let html = '<div class="carousel-item temperature" id="' + id + '">';
                    html += '<span class="sensor-value">' + value + '</span>';
                    html += '<span class="sensor-title">' + type + '</span>';
                    html += '</div>';

                    $('.temperatures').append( html );
                }
            });
        }).done( function() {
            setTimeout( temperatures, 1000 )
        } );
    }

    setTimeout(temperatures, 1000)
</script>

Xml de Exemplo:

<temperature>
    <type>Tipo</type>
    <value>Valor</value>
</temperature>

Você pode utilizar varias formas de criar um ID. Pode ser convertendo para hexadecimal, base64; utilizando bitwise, md5, sha1; concatenando o tipo com o valor; adicionar em um array e fazer as verificações com a método Array.find ou Array.indexOf etc.

1
  • Obrigada Valdeir, no caso, o setTimeout chamando a função dentro da mesma repete os comandos no intervalo solicitado, mas infelizmente não funcionou no caso da atualização dos dados do arquivo. Tentarei sua sugestão assim que possível, espero que funcione :)
    – Roberta
    20/02/2018 às 15:00

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 .