Come posso fare in modo che setInterval funzioni anche quando una scheda non è attiva in Chrome?

Ho setIntervalun pezzo di codice in esecuzione 30 volte al secondo. Funziona benissimo, tuttavia quando seleziono un'altra scheda (in modo che la scheda con il mio codice diventi inattiva), setIntervalper qualche motivo è impostata su uno stato inattivo.

Ho realizzato questo caso di test semplificato ( http://jsfiddle.net/7f6DX/3/ ):

var $div = $('div');
var a = 0;

setInterval(function() {
    a++;
    $div.css("left", a)
}, 1000 / 30);

Se esegui questo codice e poi passi a un'altra scheda, attendi qualche secondo e torni indietro, l'animazione continua nel punto in cui era quando sei passato all'altra scheda. Quindi l'animazione non viene eseguita 30 volte al secondo nel caso in cui la scheda sia inattiva. Ciò può essere confermato contando il numero di volte in cui la setIntervalfunzione viene chiamata ogni secondo - questo non sarà 30 ma solo 1 o 2 se la scheda è inattiva.

Immagino che ciò avvenga in base alla progettazione in modo da migliorare le prestazioni, ma esiste un modo per disabilitare questo comportamento? In realtà è uno svantaggio nel mio scenario.

Sulla maggior parte dei browser le schede inattive hanno un'esecuzione a bassa priorità e questo può influire sui timer JavaScript.

Se i valori della transizione sono stati calcolati utilizzando il tempo reale trascorso tra i fotogrammi anziché gli incrementi fissi su ciascun intervallo, non solo risolvete questo problema, ma potete anche ottenere un'animazione più soffice utilizzando requestAnimationFrame in quanto può ottenere fino a 60fps se il processore non lo è molto occupato.

Ecco un esempio JavaScript di vaniglia di una transizione di proprietà animata utilizzando requestAnimationFrame:

var target = document.querySelector('div#target')
var startedAt, duration = 3000
var domain = [-100, window.innerWidth]
var range = domain[1] - domain[0]

function start() {
  startedAt = Date.now()
  updateTarget(0)
  requestAnimationFrame(update)
}

function update() {
  let elapsedTime = Date.now() - startedAt

  // playback is a value between 0 and 1
  // being 0 the start of the animation and 1 its end
  let playback = elapsedTime / duration

  updateTarget(playback)
  
  if (playback > 0 && playback < 1) {
  	// Queue the next frame
  	requestAnimationFrame(update)
  } else {
  	// Wait for a while and restart the animation
  	setTimeout(start, duration/10)
  }
}

function updateTarget(playback) {
  // Uncomment the line below to reverse the animation
  // playback = 1 - playback

  // Update the target properties based on the playback position
  let position = domain[0] + (playback * range)
  target.style.left = position + 'px'
  target.style.top = position + 'px'
  target.style.transform = 'scale(' + playback * 3 + ')'
}

start()

body {
  overflow: hidden;
}

div {
    position: absolute;
    white-space: nowrap;
}

<div id="target">...HERE WE GO</div>

Per attività in background (non correlate all'interfaccia utente)

@UpTheCreek comment:

Va bene per problemi di presentazione, ma ci sono ancora alcune cose che è necessario continuare a correre.

Se hai attività in background che devono essere eseguite con precisione a determinati intervalli, puoi utilizzare HTML5 Web Workers . Dai un'occhiata alla risposta di Möhre qui sotto per maggiori dettagli ...

"Animazioni" CSS vs JS

Questo problema e molti altri potrebbero essere evitati utilizzando transizioni / animazioni CSS anziché animazioni basate su JavaScript che aggiungono un notevole sovraccarico. Consiglierei questo plugin jQuery che ti consente di trarre vantaggio dalle transizioni CSS proprio come i animate()metodi.

Ho riscontrato lo stesso problema con dissolvenza audio e lettore HTML5. Si è bloccato quando la scheda è diventata inattiva. Quindi ho scoperto che un WebWorker è autorizzato a utilizzare intervalli / timeout senza limitazione. Lo uso per pubblicare "tick" sul javascript principale.

Codice WebWorkers:

var fading = false;
var interval;
self.addEventListener('message', function(e){
    switch (e.data) {
        case 'start':
            if (!fading){
                fading = true;
                interval = setInterval(function(){
                    self.postMessage('tick');
                }, 50);
            }
            break;
        case 'stop':
            clearInterval(interval);
            fading = false;
            break;
    };
}, false);

Javascript principale:

var player = new Audio();
player.fader = new Worker('js/fader.js');
player.faderPosition = 0.0;
player.faderTargetVolume = 1.0;
player.faderCallback = function(){};
player.fadeTo = function(volume, func){
    console.log('fadeTo called');
    if (func) this.faderCallback = func;
    this.faderTargetVolume = volume;
    this.fader.postMessage('start');
}
player.fader.addEventListener('message', function(e){
    console.log('fader tick');
    if (player.faderTargetVolume > player.volume){
        player.faderPosition -= 0.02;
    } else {
        player.faderPosition += 0.02;
    }
    var newVolume = Math.pow(player.faderPosition - 1, 2);
    if (newVolume > 0.999){
        player.volume = newVolume = 1.0;
        player.fader.postMessage('stop');
        player.faderCallback();
    } else if (newVolume < 0.001) {
        player.volume = newVolume = 0.0;
        player.fader.postMessage('stop');
        player.faderCallback();
    } else {
        player.volume = newVolume;
    }
});

Esiste una soluzione per utilizzare i Web Worker (come menzionato in precedenza), poiché vengono eseguiti in processi separati e non vengono rallentati

Ho scritto un piccolo script che può essere utilizzato senza modifiche al codice: sostituisce semplicemente le funzioni setTimeout, clearTimeout, setInterval, clearInterval.

Basta includerlo prima di tutto il codice.

maggiori informazioni qui

Basta fare questo:

var $div = $('div');
var a = 0;

setInterval(function() {
    a++;
    $div.stop(true,true).css("left", a);
}, 1000 / 30);

Le schede del browser inattive memorizzano in buffer alcune delle funzioni setIntervalo setTimeout.

stop(true,true) interromperà tutti gli eventi bufferizzati ed eseguirà immediatamente solo l'ultima animazione.

Il window.setTimeout()metodo ora blocca per inviare non più di un timeout al secondo nelle schede inattive. Inoltre, ora blocca i timeout nidificati al valore più piccolo consentito dalla specifica HTML5: 4 ms (anziché i 10 ms utilizzati per il serraggio).

Penso che una migliore comprensione di questo problema sia in questo esempio: http://jsfiddle.net/TAHDb/

Sto facendo una cosa semplice qui:

Avere un intervallo di 1 secondo e ogni volta nascondere il primo intervallo e spostarlo per ultimo e mostrare il secondo intervallo.

Se rimani sulla pagina funziona come dovrebbe. Ma se nascondi la scheda per alcuni secondi, quando torni vedrai una cosa bizzarra.

È come tutti gli eventi che non sono avvenuti durante il periodo in cui sei stato inattivo ora si verificheranno tutti in 1 volta. quindi per alcuni secondi otterrai X eventi. sono così veloci che è possibile vedere tutte e 6 le campate contemporaneamente.

Quindi cuciture Chrome ritarda solo gli eventi, quindi quando torni tutti gli eventi si verificano ma tutti in una volta ...

Un'applicazione pratica è stata questa ocur iss per una semplice presentazione. Immagina che i numeri siano Immagini, e se l'utente rimane con la linguetta nascosta quando torna, vedrà tutti gli img fluttuare, Totally mesed.

Per risolvere questo problema, usa l'arresto (vero, vero) come ha detto pimvdb. Ciò cancellerà la coda degli eventi.

Per me non è importante riprodurre l'audio in background come per gli altri qui, il mio problema era che avevo alcune animazioni e si comportavano da matti quando eri in altre schede e tornavi da loro. La mia soluzione è stata quella di inserire queste animazioni se ciò impedisce la scheda inattiva :

if (!document.hidden){ //your animation code here }

grazie a ciò la mia animazione era in esecuzione solo se la scheda era attiva. Spero che questo possa aiutare qualcuno con il mio caso.

Entrambi setIntervale requestAnimationFramenon funzionano quando la scheda è inattiva o funziona ma non nei periodi giusti. Una soluzione è utilizzare un'altra fonte per eventi temporali. Ad esempio i web socket o i web worker sono due fonti di eventi che funzionano correttamente mentre la scheda è inattiva. Quindi non è necessario spostare tutto il codice su un web worker, basta usare worker come fonte di eventi temporali:

// worker.js
setInterval(function() {
    postMessage('');
}, 1000 / 50);

.

var worker = new Worker('worker.js');
var t1 = 0;
worker.onmessage = function() {
    var t2 = new Date().getTime();
    console.log('fps =', 1000 / (t2 - t1) | 0);
    t1 = t2;
}

collegamento jsfiddle di questo esempio.

Fortemente influenzato dalla biblioteca di Ruslan Tushov, ho creato la mia piccola biblioteca . Basta aggiungere lo script in <head>e verrà corretto setIntervale setTimeoutcon quelli che usano WebWorker.

La riproduzione di un file audio garantisce per il momento prestazioni JavaScript di sfondo completo

Per me, è stata la soluzione più semplice e meno invadente - oltre a riprodurre un suono debole / quasi vuoto, non ci sono altri potenziali effetti collaterali

Puoi trovare i dettagli qui: https://stackoverflow.com/a/51191818/914546

(Da altre risposte, vedo che alcune persone usano proprietà diverse del tag Audio, mi chiedo se sia possibile utilizzare il tag Audio per le massime prestazioni, senza effettivamente suonare qualcosa)

Nota: questa soluzione non è adatta se ti piace che l'intervallo funzioni in background, ad esempio la riproduzione di audio o ... ma se sei confuso, ad esempio, se l'animazione non funziona correttamente quando torni alla tua pagina (scheda), questo è una buona soluzione.

Esistono molti modi per raggiungere questo obiettivo, forse il "WebWorkers" è il più standard ma sicuramente non è il più semplice e utile, soprattutto se non hai abbastanza tempo, quindi puoi provare in questo modo:

► CONCETTO BASE:

1- crea un nome per il tuo intervallo (o animazione) e imposta il tuo intervallo (animazione), in modo che venga eseguito quando l'utente apre per la prima volta la tua pagina: var interval_id = setInterval(your_func, 3000);

2- by $(window).focus(function() {});e $(window).blur(function() {});puoi clearInterval(interval_id)ogni volta che il browser (scheda) viene disattivato e Riesegui l'intervallo (animazione) ogni volta che il browser (scheda) riattivainterval_id = setInterval();

► CODICE CAMPIONE:

var interval_id = setInterval(your_func, 3000);

$(window).focus(function() {
    interval_id = setInterval(your_func, 3000);
});
$(window).blur(function() {
    clearInterval(interval_id);
    interval_id = 0;
});

È una domanda piuttosto vecchia ma ho riscontrato lo stesso problema.
Se esegui il tuo Web su Chrome, puoi leggere questo post Schede di sfondo in Chrome 57 .

Fondamentalmente il timer intervallo potrebbe essere eseguito se non ha esaurito il budget del timer.
Il consumo di budget si basa sull'utilizzo del tempo della CPU dell'attività all'interno del timer.
Sulla base del mio scenario, disegno video su tela e trasporto su WebRTC.
La connessione video webrtc continuerebbe ad aggiornarsi anche se la scheda è inattiva.

Tuttavia devi usare setIntervalinvece di requestAnimationFrame.
tuttavia non è consigliato per il rendering dell'interfaccia utente.

Sarebbe meglio ascoltare visibilityChange evento e cambiare di conseguenza il mechenismo.

Inoltre, potresti provare @ kaan-soral e dovrebbe funzionare in base alla documentazione.

Ecco la mia soluzione approssimativa

(function(){
var index = 1;
var intervals = {},
    timeouts = {};

function postMessageHandler(e) {
    window.postMessage('', "*");

    var now = new Date().getTime();

    sysFunc._each.call(timeouts, function(ind, obj) {
        var targetTime = obj[1];

        if (now >= targetTime) {
            obj[0]();
            delete timeouts[ind];
        }
    });
    sysFunc._each.call(intervals, function(ind, obj) {
        var startTime = obj[1];
        var func = obj[0];
        var ms = obj[2];

        if (now >= startTime + ms) {
            func();
            obj[1] = new Date().getTime();
        }
    });
}
window.addEventListener("message", postMessageHandler, true);
window.postMessage('', "*");

function _setTimeout(func, ms) {
    timeouts[index] = [func, new Date().getTime() + ms];
    return index++;
}

function _setInterval(func, ms) {
    intervals[index] = [func, new Date().getTime(), ms];
    return index++;
}

function _clearInterval(ind) {
    if (intervals[ind]) {
        delete intervals[ind]
    }
}
function _clearTimeout(ind) {
    if (timeouts[ind]) {
        delete timeouts[ind]
    }
}

var intervalIndex = _setInterval(function() {
    console.log('every 100ms');
}, 100);
_setTimeout(function() {
    console.log('run after 200ms');
}, 200);
_setTimeout(function() {
    console.log('closing the one that\'s 100ms');
    _clearInterval(intervalIndex)
}, 2000);

window._setTimeout = _setTimeout;
window._setInterval = _setInterval;
window._clearTimeout = _clearTimeout;
window._clearInterval = _clearInterval;
})();

Sono stato in grado di chiamare la mia funzione di richiamata a un minimo di 250 ms utilizzando il tag audio e gestendo l'evento ontimeupdate. Si chiama 3-4 volte in un secondo. È meglio di un secondo in ritardo setTimeout