Fade-Effekt aktualisieren auf verlorenen Fokus mehrere Male

Question

Ich bin neu in Web-Entwicklung und ich liebe es.

Aber ich habe ein Problem festgestellt, und ich kann es nicht herausfinden. Wenn ich den Fokus auf meinen Browser-Tab verliere, wird mein Fade-Effekt, der für meine Bilder vorgenommen wurde, wenn sie geändert werden, mehrmals aktiviert.

Ein anderes Problem, ich möchte wirklich meine Bilder in meinem div Element wie sein: http://jsfiddle.net/eb51hxj1/ wenn ich die Größe des Browsers.

<div class="divImage"> 
    <img id="image"> </div> 
<div> 

Mein Code ist:

https://jsfiddle.net/a2bsarfb/

Answer 1

ein neues var machen, die für das Fenster Fokus prüft. Wenn der Fokus des Fensters weg ist, überspringe einfach den Rest des Codes.

an der Spitze ein neues var hinzufügen:

var lostFocus = false; 

In der Funktion Add Anrufer:

if(lostFocus){ return false; } 

es wird also wie folgt aussehen:

function Caller() { 
    var imag = ["https://i.ytimg.com/vi/tq0H6nQMdNk/maxresdefault.jpg", "https://i.ytimg.com/vi/4qVMnkF7W60/maxresdefault.jpg", "https://s-media-cache-ak0.pinimg.com/originals/52/1d/e6/521de6a52e774664745132156448f43b.jpg"]; 
    var numarImagini = imag.length - 1; 
    var i = Math.floor((Math.random() * imag.length)); 
    Rotate(imag[i], i); 
    i++; 
    setInterval(function() { 
    if(lostFocus){ return false; } 
    if (i > imag.length - 1) { 
     i = 0; 
     Rotate(imag[i], i); 
     i++; 
    } else { 
     Rotate(imag[i], i); 
     i++; 
    } 
    }, 2000) 
} 

und unten Fügen Sie die Ereignislistener hinzu:

window.onblur = function() { lostFocus = true; }; 
window.onfocus = function() { lostFocus = false; };