Phonegap — почему медленно переключается css класс?

Question

[un1t]

Сделал в качестве "hello world" фонарик.

Есть простая кнопка:

<div id="switch-button" class="switch-button"></div>

Стили:

.switch-button {
    width: 100px;
    height: 100px;
    background-color: blue;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    margin: 100px auto;
}

.switch-button__on {
    background-color: red;
}

При нажатии добавляем класс "switch-button__on", чтобы изменить цвет кнопки.

var btn = document.getElementById('switch-button')
btn.onclick = function () {
    if (btn.classList.contains('switch-button__on')) {
        btn.classList.remove('switch-button__on');
        window.plugins.flashlight.switchOff();
    } else {
        btn.classList.add('switch-button__on');
        window.plugins.flashlight.switchOn();
    }
}

Неожиданностью стало то, что переключение цвета кнопки происходит как-то заметно медленно, фонарик включается заметно раньше чем кнопка меняет цвет, хотя порядок вызова обратный.
Почему так просиходит? Как исправить?

Answer 1

[Сергей Протько]

updates.html5rocks.com/2013/12/300ms-tap-delay-gon...

update:

Еще причиной может стать то, что вызов window.plugins.flashlight.* блокирует поток, то есть плагин работает в том же потоке что и webview и reflow/repaint не наступает пока window.plugins.flashlight не отпустит.

Попробуйте так:

var btn = document.getElementById('switch-button')
btn.onclick = function () {
    if (btn.classList.contains('switch-button__on')) {
        btn.classList.remove('switch-button__on');
        setTimeout(function () {
             window.plugins.flashlight.switchOff();
        }, 0);
        window.plugins.flashlight.switchOff();
    } else {
        btn.classList.add('switch-button__on');
        setTimeout(function () {
            window.plugins.flashlight.switchOn();
        }, 0);
    }
}

Comments

[un1t]

Это тут не при чем, т.к. событие "click" уже сработало - мы видимо это потому как фонарик включился. А цвет меняется через заметный промежуток времени еще позже.

[Сергей Протько]

@un1t обновил ответ.

[un1t]

Да похоже плагин блокирует, поэтому задержка. Может быть можено callback поставить на какое-то событие применение изменения классы или перерисовку webview? Тогда можно было бы подождать отрисовки и только затем включать фонарик.

[Сергей Протько]

@un1t setTimeout за тем и нужен. Он делает заявку в event loop и код в нем будет выполнен не раньше чем отработает repaint. По идее. Попробуйте.