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.
console.log(i, data)
dentro do$.get
para ver se está retornando e qual é o retorno