Почему код выполняется параллельно?

Question

[McBernar]

Привет.

Ребзя, вопрос.

Есть js-код (псевдо):

while (elem.opacity > 0) {
    elem.opacity -= .1;
}
elem.remove();

Все просто — изменяем прозрачность элемента DOM в цикле от 1 до 0 с шагом 0.1.
После этого удаляем элемент DOM.

Так вот вопрос — почему удаление происходит до того, как opacity стала равна 0?
Почему эти процессы происходят не последовательно, а параллельно? Ведь, по-идее, интерпретатор должен дождаться окончания работы цикла и только после продолжить выполнение кода, но на деле изменения opacity не видно, но видно, что элемент DOM удаляется сразу при загрузке.

Куда копать, чтобы понять суть происходящего?

Answer 1

[Антон Спирин]

В вашем случае, скорей всего, opacity меняется за тысячные доли секунды и срабатывает remove.
Демо.
Все шаги выполнения в консоли. На моей рабочей машине opacity меняется с 1 до 0 за 0.005 секунды. Представьте насколько это мало.
Код синхронный. Выполняться параллельно он не может.

Comments

[McBernar]

Срабатывает.
Если удалить remove(), то видно смену прозрачности.

[Антон Спирин]

McBernar, https://jsfiddle.net/rockon404/5ovxg7yw/ посмотрите внимательно в консоль.
Смена происходит так быстро, что вы этого не замечаете. 5 тысячных секунды.

[McBernar]

Вы правы, у меня в CSS стоял забытый транзишен.
Пора отдохнуть :)

[Антон Спирин]

McBernar, если хотите менять по интервалу, используйте для это задачи setInterval. По достижению нужного значения делаете clearInterval и удаляете элемент. Или изменить класс элемента и доверить дело transition. Но тогда встает вопрос когда именно удалять элемент.

[McBernar]

Да, так и сделал в итоге, но хотелось разобраться в проблеме, которую сам себе придумал :) Есть еще прекрасный event transitionend, но не подходил в моем случае.

Answer 2

[Nick Sdk]

есть подозрение, что у вас:
1. цикл даже не начинается, т.к. значение opacity изначально может быть "undefined"
и условие (undefined > 0) == false
2. цикл выполняется так быстро, что прозрачность выставляется в ноль быстро и сразу же удаляется элемент
3. еще следует значение opacity выставлять немного по-другому
elem.style.opacity
это, все-таки значение стиля
3.1. в этом случае, кстати, тоже по умолчанию значение может быть как пусто, если вы раньше его не присвоили каким либо образом, поэтому перед циклом скорее-всего надо бы делать типа elem.style.opacity=1;

Comments

[McBernar]

1. Выполняется, если убрать remove() — это будет видно
2. Возможно, но, см. выше
3. Естественно :) Написал же, что это псевдо-код

[Nick Sdk]

McBernar, в этом псевдо-коде можно сделать небольшой дебаг:

while (elem.opacity > 0) {
    var opacity = elem.opacity - .1;
    console.log('opacity: ' + opacity);
    elem.opacity = opacity;
}
console.log('el.remove');

и посмотреть, что быстрее выполняется :)