0

Boa noite. Tenho a seguinte função:

function verificaOnOff(){

  for(var i in tbModulos){

    var mod = tbModulos[i];

    $.get('http://'+ mod.ip +'/rele', function(data) {
        if (data == '1') {
          $('#icone-'+i).removeClass('branco');
          $('#icone-'+i).addClass('amarelo');
          $('input[id="'+i+'"]').prop('checked', true);
        } else {
          $('#icone-'+i).removeClass('amarelo');
          $('#icone-'+i).addClass('branco');
          $('input[id="'+i+'"]').prop('checked', false);
        }
    })
  }
}

Ela, quando chamada, verifica se um relê está ligado ou não, via GET (0 ou 1). Se receber 1, altera alguns parâmetros de CSS, e vice versa.

O problema é que, só está alterando o último. Onde estou errando?

3
  • 1
    Coloque um console.log(i, data) dentro do $.get para ver se está retornando e qual é o retorno
    – Woss
    Commented 29/06/2018 às 23:20
  • @AndersonCarlosWoss: 1 1, repetido 2 vezes. Os dois relês estão ligados. Commented 29/06/2018 às 23:26
  • 1
    Está fazendo um get num loop for.. só vai retornar o último porque é totalmente assíncrono.
    – Sam
    Commented 30/06/2018 às 0:01

1 Resposta 1

3

Isso possivelmente aconteceu porque a referência de i será a mesma para todas as requisições. Como são requisições assíncronas, o laço terminará rapidamente, chegando ao valor máximo de i, que neste caso deve ser 1, antes que as requisições sejam completadas; assim, quando forem completadas, a função callback será chamada, todas com o valor de i igual a 1. Para contornar isso, você terá que criar referências distintas ao valor de i para cada requisição. A forma mais fácil de fazer isso é importá-lo para um escopo único de cada requisição, dentro de uma função:

function rele(modulo, i) {
    return $.get('http://'+ modulo.ip +'/rele', function(data) {
        const icone = $('#icone-'+i)
        const isOn = (data == '1')

        icone.removeClass(isOn ? 'branco' : 'amarelo');
        icone.addClass(isOn ? 'amarelo' : 'branco')
        $('input[id="'+i+'"]').prop('checked', isOn);
    })
}

function verificaOnOff(modulos){
    $.each(modulos, (i, modulo) => rele(modulo, i));
}

Assim, o valor de i de cada requisição estará limitado pelo escopo da função rele, único para cada uma. Além disso, algumas outras melhorias foram feitas no código.


Ao invés de ficar adicionando e removendo classes, por quê não utiliza um data-attribute? Com CSS mesmo você consegue personalizar os elementos de acordo com o valor do atributo. Veja um exemplo:

$('[data-status]').on('click', function (event) {
  const newStatus = ($(this).attr('data-status') == '0') ? '1' : '0'
  $(this).attr('data-status', newStatus)
});
li {
  cursor: pointer;
}

li[data-status='0'] {
  color: lightgray;
}

li[data-status='1'] {
  color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li data-status='0'>Item 1</li>
  <li data-status='0'>Item 2</li>
  <li data-status='0'>Item 3</li>
  <li data-status='0'>Item 4</li>
  <li data-status='0'>Item 5</li>
</ul>

Assim, seu código ficaria algo como:

function rele(modulo, i) {
    return $.get('http://'+ modulo.ip +'/rele', function(data) {
        $('#icone-'+i).attr('data-status', data)
        $('input[id="'+i+'"]').prop('checked', data == '1');
    })
}

O que simplifica um pouco.

2
  • Funcionou perfeitamente. Muito obrigado pela ajuda e explicação! Commented 30/06/2018 às 0:06
  • Humm, entendi. Não conhecia isso, irei usar. Obrigado mais uma vez Anderson! Commented 30/06/2018 às 1:37

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 .