Answer the question
In order to leave comments, you need to log in
Phonegap - why is the css class switching slowly?
I made a flashlight as a "hello world".
There is a simple button:
<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;
}
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 the question
In order to leave comments, you need to log in
updates.html5rocks.com/2013/12/300ms-tap-delay-gon...
update:
Another reason could be that calling window.plugins.flashlight.* blocks the thread, meaning the plugin runs on the same thread as webview and reflow/repaint does not occur until window.plugins.flashlight is released.
Try like this:
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);
}
}
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question