temporizador - ¿Qué sucede con la ejecución de JavaScript(settimeout, etc.) cuando iPhone/Android se queda dormido?

settimeout callback

Question

Tengo una aplicación web jQuery Mobile que se dirige a dispositivos iOS y Android. Un componente de la aplicación es una tarea en segundo plano, que comprueba periódicamente si hay.) Cambios en los datos locales yb) conectividad con el servidor. Si ambos son verdaderos, la tarea empuja los cambios.

Estoy usando una función simple setTimeout () para ejecutar esta tarea. Cada condición de falla o éxito llama a setTimeout () en la tarea en segundo plano, asegurándose de que se ejecute en intervalos de 30 segundos. Actualizo un div de estado con la marca de tiempo del último tiempo de ejecución de la tarea para fines de depuración.

En cualquier navegador de escritorio, esto funciona bien; sin embargo, en iOS o Android, después de un período de tiempo, la tarea deja de ejecutarse. Me pregunto si esto está relacionado con la configuración de conservación de energía de los dispositivos: cuando iOS ingresa en modo de espera, ¿termina la ejecución de JavaScript? Eso es lo que parece suceder.

Si es así, ¿cuál es la mejor manera de reanudar? ¿Hay algún evento en el que me pueda enganchar? Si no es así, ¿qué otras opciones existen que no impliquen el enganche en eventos dependientes de la interacción del usuario (no quiero vincular toda la página a un evento de clic solo para reiniciar la tarea de fondo).

Answer 1

Cuando el usuario cambia a otra aplicación o la pantalla duerme, los temporizadores parecen detenerse hasta que el usuario vuelva a la aplicación (o cuando la pantalla se active).

Phonegap tiene un evento de resume que puede escuchar en lugar de sondear para el estado (así como un evento de pause si desea hacer cosas antes de que esté desenfocado). Empiezas a escucharlo después de que el dispositivo se dispare.

document.addEventListener("deviceready", function () {
    // do something when the app awakens
    document.addEventListener(''resume'', function () {
        // re-create a timer.
        // ...
    }, false);
}, false);

Uso angular con phonegap y tengo implementado un servicio que me permite un cierto tiempo de espera, pero básicamente puedes crear un objeto que establece el temporizador, cancela el temporizador y lo más importante, actualiza el temporizador (la actualización es lo que se llama durante el ''currículum'' ''evento).

En angular tengo un alcance de alcance y raíz al que puedo adjuntar datos, mi tiempo de espera es global, así que lo adjunto al ámbito de la raíz, pero a los fines de este ejemplo, simplemente lo adjuntaré al documento. No lo justifico porque necesita aplicarlo a algún tipo de ámbito o espacio de nombres.

var timeoutManager = function () {
    return {
        setTimer: function (expiresMsecs) {
            document.timerData = {
                timerId: setTimeout(function () {
                    timeoutCallback();
                },
                expiresMsecs),

                totalDurationMsecs: expiresMsecs,
                expirationDate: new Date(Date.now() += expiresMsecs)
            };
        },

        updateTimer: function () {
            if (document.timerData) {
                //
                //  Calculate the msecs remaining so it can be used to set a new timer.
                //
                var timerMsecs = document.timerData.expirationDate - new Date();

                //
                //  Kill the previous timer because a new one needs to be set or the callback
                //  needs to be fired.
                //
                this.cancelTimer();

                if (timerMsecs > 0) {
                    this.setTimer(timerMsecs);
                } else {
                    timeoutCallback();
                }
            }
        },

        cancelTimer: function () {
            if (document.timerData && document.timerData.timerId) {
                clearTimeout(document.timerData.timerId);
                document.timerData = null;
            }
        }
    };
};

Podría hacer que la función de administrador tome un parámetro de milisegundos en lugar de pasarlo al conjunto, pero de nuevo esto se modela un poco después del servicio angular que escribí. Las operaciones deben ser lo suficientemente claras y concisas para hacer algo con ellas y agregarlas a su propia aplicación.

var timeoutCallback = function () { console.log(''timer fired!''); };
var manager = timeoutManager();
manager.setTimer(20000);

Deberá actualizar el temporizador una vez que obtenga el evento de reanudación en su oyente de eventos, de esta forma:

// do something when the app awakens
document.addEventListener(''resume'', function () {
    var manager = timeoutManager();
    manager.updateTimer();
}, false);

El administrador de tiempo de espera también tiene cancelTimer() que se puede utilizar para matar el temporizador en cualquier momento.

Answer 2

Parece que la ejecución de JavaScript está pausada en MobileSafari cuando la página del navegador no está enfocada. También parece que si los eventos setInterval () se retrasan, simplemente se activan tan pronto como el navegador está enfocado. Esto significa que deberíamos poder mantener un setInterval () en ejecución, y asumir que el navegador perdió / recuperó el foco si la función setInterval tomó mucho más tiempo de lo normal.

Este código alerta después de cambiar de una pestaña del navegador, después de cambiar desde otra aplicación y después de reanudar desde el modo reposo. Si configura su umbral un poco más que su setTimeout (), puede suponer que su tiempo de espera no finalizará si esto se dispara.

Si desea permanecer en el lado seguro: puede guardar su ID de tiempo de espera (devuelto por setTimeout) y establecer esto a un umbral más corto que su tiempo de espera, luego ejecute clearTimeout () y setTimeout () nuevamente si esto se dispara.

<script type="text/javascript">
var lastCheck = 0;

function sleepCheck() {
        var now = new Date().getTime();
        var diff = now - lastCheck;
        if (diff > 3000) {
                alert(''took '' + diff + ''ms'');
        }
        lastCheck = now;
}

window.onload = function() {
        lastCheck = new Date().getTime();
        setInterval(sleepCheck, 1000);
}
</script>

Editar: parece que esto a veces se puede activar más de una vez en una fila en el currículum, por lo que tendría que manejar eso de alguna manera. (Después de dejar que mi navegador Android durmiera durante toda la noche, se despertó con dos alertas (). Apuesto a que Javascript se reanudó en algún momento arbitrario antes de dormir por completo).

Probé en Android 2.2 y con el último iOS; ambos alertan tan pronto como reanude su sueño.

Answer 3

Puedes usar esta clase github.com/mustafah/background-timer base a @jlafay answer, donde puedes usar de la siguiente manera:

coffeescript

timer = new BackgroundTimer 10 * 1000, ->
    # This callback will be called after 10 seconds
    console.log ''finished''

timer.enableTicking 1000, (remaining) ->
    # This callback will get called every second (1000 millisecond) till the timer ends
    console.log remaining

timer.start()

javascript

timer = new BackgroundTimer(10 * 1000, function() {
    // This callback will be called after 10 seconds
    console.log("finished");
});

timer.enableTicking(1000, function(remaining) {
    // This callback will get called every second (1000 millisecond) till the timer ends
    console.log(remaining);
});

timer.start();

Espero que ayude, gracias ...