Почему обработка стилей в js выполняется в самом конце?

Question

[stasboiko]

Имеем кнопку:
<button id="save-button"></button>

И обработчик:

$('#save-button').css('display', 'none');
for (i = 0; i < 9999: i++) {\
console.log(i);
}

Если нажать на кнопку, то сначала выполнится цикл и только после выполнения цикла кнопка скроется (display: none).
Вопрос.
Как сделать так, чтоб код выполнялся в порядке написания.
Т.е. в данном примере, сперва должна скрыться кнопка, а затем уже выполняться цикл.

Answer 1

[Tanyel]

$('#save-button').animate({'display':'none'},0, function(){
for (i = 0; i < 9999: i++) {
console.log(i);
}
});

Comments

[stasboiko]

$( "#save-button" ).click(function() {
    $('#save-button').animate({'display': 'none'}, 0, function () {
        for (i = 0; i < 9999; i++) {
            console.log(i);
        }
    });
});

Данный код выполнит полное прохождение цикла. Кнопка останется display: block.

[Tanyel]

stasboiko, можно использовать очереди https://ruseller.com/jquery.php?id=90

[stasboiko]

Само использование очередей (queue) не помогло. Но принцип использования очередей и animate натолкнуло на следующий вариант:

$("#save-button").click(function () 
{
 $({displayType: 'none'}).animate(
  {
    displayType: "block"
  },
  {
    step: function () 
    {
       $('#save-button').css('display', 'block');
       displayType = $('#save-button').css('display');
    },
       complete: someFunction()
 });       
});

function someFunction() {
  for (i = 0; i < 9999: i++) {
    console.log(i);
  }
}

Работает так как надо!

Answer 2

[Роман]

Убрать дефис из названия ИДа
<button id="saveButton"></button>

Можно написать вот так. Выполняется все ок, просто браузер задумывается.

saveButton.onclick = () => {
      saveButton.hidden = true;
        for (i = 0; i < 9999; i++) {
          console.log(i);
        }
    }

или с задержкой, так выглядит лучше =)

saveButton.onclick = () => {
      saveButton.hidden = true;
      setTimeout(function() {
        for (i = 0; i < 9999; i++) {
          console.log(i);
        }
      }, 100)
    }

пы.сы. jQuery в 2к17... не надо так... =(

Comments

[stasboiko]

Данный код скроет кнопку, но уже на двухтысячном (трехтысячном) прохождении цикла. Вся задумка заключается в том, чтобы показывать прелоадер на время выполнения цикла (к примеру). Но если прелоадер будет показываться с такой явной задержкой, то это бажина...
Есть операции со стилями, которые должны выполниться непосредственно перед выполнением числовых вычислений.
Самое плохое в этом, что если мы пропишем проверку перед выполнением цикла :

saveButton.onclick = () => {
      saveButton.hidden = true;
      console.log(document.getElementById('saveButton').style.display);
        for (i = 0; i < 9999; i++) {
          console.log(i);
        }
    }

Либо вот так вот:

$( "#saveButton" ).click(function() {
    $('#saveButton').toggle();
        console.log(document.getElementById('saveButton').style.display);
        if (document.getElementById('saveButton1').style.display == "none") {
            for (i = 0; i < 9999; i++) {
                console.log(i);
            }
        }
});

То в консоли покажет, что display у кнопки равен "none".
Но визуально кнопка скроется только после выполнения цикла.