Как исправить ошибку в коде?

Question

[Евгений Иванов]

На странице есть 6 ссылок (6 css кнопок).
Сгруппированы по 2 кнопки в строку.
Строка 1, 2, 3.

Нужно по таймеру, изменять их стили, в зависимости от ajax ответа.
По непонятной причине сейчас изменяется только третья строка (последняя?), хотя должна изменяться первая. Первая т.к. - ответ ajax должен изменять первую строку.

function update_switch() 
{

//Строки - пробегаем все от 1 до 3
for (var number=1; number<3; number++) 
{

//Получаем значение
$.ajax({url: 'actions.php', method: 'POST', data: {action: 'get_switch_status', number:number} ,success: function(data)
{
//Если значение on
if (data=='on')
{
//Для этой кнопки изменяем стили
$(".page_content .switch_off_button_"+number).css("background-color", "#14111d");
$(".page_content .switch_on_button_"+number).css("background-color", "#1b8ee3");	
}
//Если значение off
if (data=='off')
{
$(".page_content .switch_on_button_"+number).css("background-color", "#14111d");
$(".page_content .switch_off_button_"+number).css("background-color", "#1b8ee3");	
}

}
});

}

}
setInterval(update_switch, 2000); //2 сек

Где ошибка и почему изменяется 3я строка?
Как исправить ошибку в коде?

Comments

[yanis_kondakov]

const updateSwitch = [1,2,3].forEach((n) => {
  //Получаем значение
  $.ajax({url: 'actions.php', method: 'POST', data: {action: 'get_switch_status', number: n} ,success: function(data)
  {
    //Если значение on
    if (data=='on')
    {
      //Для этой кнопки изменяем стили
     $(".page_content .switch_off_button_"+ n).css("background-color", "#14111d");
     $(".page_content .switch_on_button_"+ n).css("background-color", "#1b8ee3");	
    }
    //Если значение off
    if (data=='off')
    {
      $(".page_content .switch_on_button_" + n).css("background-color", "#14111d");
      $(".page_content .switch_off_button_" + n).css("background-color", "#1b8ee3");	
    }

  }
});

setInterval(updateSwitch, 2000); //2 сек

[Евгений Иванов]

yanis_kondakov, Спасибо. С небольшой доработкой ваш код работает.

[yanis_kondakov]

Евгений Иванов, разница в том, что forEach создает лексическое окружение для каждой итерации, а for только для последней.

А в чем доработать пришлось, я просто с телефона писал?

Answer 1

[Руслан .]

Вот здесь не понятно:
for (var number=1; number<3; number++)
При таком условии number будет 1 и 2 до 3 не дойдет.
Чтобы было как в комментарии: //Строки - пробегаем все от 1 до 3
нужно:
for (var number=1; number<4; number++)

Comments

[Евгений Иванов]

При таком условии number будет 1 и 2 до 3 не дойдет.

Действительно, не доглядел, нем не менее я работаю со строкой 1. Меня и до двух устроит.
Но код как будто пропускает 1 и 2 и сразу работает с 3.

Answer 2

[Stalker_RED]

Достаточно было заменить var number=1 на let number=1

Читайте о замыканиях и асинхронном коде.