JavaScript Timeout-Funktion

Ich suchte in anderen Posts nach der Antwort, aber die Antworten scheinen nie zu meinen Gunsten zu arbeiten. Ich versuche, ein Bild auszublenden, wenn die Seite geladen ist. Ich habe herausgefunden, dass ich eine Schleife machen kann, bis der Zähler 0 erreicht (wenn das Bild unsichtbar ist) und das Bild langsam ausgeblendet wird.JavaScript Timeout-Funktion

Das Problem ist, die Funktion SetTimeout() scheint nicht zu funktionieren. Hier ist der Code:

function timeout() { 
 
    setTimeout(function() { 
 
     //A comment said something about looping, 
 
     //but it was confusing to understand... 
 
    }, 50); 
 
} 
 

 
function setup() { 
 
    var load = document.getElementById('img'); 
 
    load.style.opacity = 0 //Start at being visible 
 
    for (var i = 10; i > 0; i = i - 0.1) { //For loop 
 
    load.style.opacity = i; //Use the index variable and use that to set the opacity 
 
    setTimeout(); //Set the timeout, but this function does not pause the program for some reason... 
 
    //I need to pause for 0.05 seconds. 
 
    } 
 
} 
 

 
window.addEventListener('load', setup, true); //Add event listener for when the page is done loading

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>Webpage</title> 
 
    </head> 
 
    <body> 
 
     <div id="img"> 
 
     <img src="http://www.downgraf.com/wp-content/uploads/2014/09/01-progress.gif" width="200" height="150"> 
 
     </div> 
 
    </body> 
 
</html>

ich das Javascript in einer separaten Datei abgelegt, ich habe es von Stack-Überlauf einfach nicht ...

zugreifen kann

Kann jemand helfen? Und manchmal kann das Bild manchmal auch knifflig sein, manchmal wird es sich nicht so verstecken, wie es soll. Vielen Dank!

Quelle

2017-02-07 Ben Stafford

Selbst wenn Sie * Zeitlimit aufrufen, wird das nicht angehalten, bis es beendet ist. Der Callback, den Sie an 'setTimeout' geben, wird nach diesem Zeitraum ausgeführt, aber der Rest Ihres Codes wird weiterhin normal ausgeführt. Sie werden fast sofort "load.style.opacity = 0" einstellen. –

Sie können eine rekursive Funktion anstelle einer Schleife verwenden

var load = document.getElementById('img'); 
 

 
function setup() { 
 
    load.style.opacity = "1"; //Start at being visible 
 

 
    timeout(1); 
 
} 
 

 
function timeout(i) { 
 
    setTimeout(function() { 
 
    i -= 0.1; 
 
    if(i<=0) 
 
     return; 
 
    load.style.opacity = i.toString(); 
 
    timeout(i); 
 
    }, 200); 
 
} 
 

 
window.addEventListener('load', setup, true); //Add event listener for when the page is done loading

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Webpage</title> 
 
</head> 
 

 
<body> 
 
    <div> 
 
    <img src="http://www.downgraf.com/wp-content/uploads/2014/09/01-progress.gif" width="200" height="150" id="img"> 
 
    </div> 
 
</body> 
 

 
</html>

Quelle

2017-02-07 15:06:11 Weedoze

Das ist wahrscheinlich die beste Antwort, danke! –

Sie erklärt ein setTimeout ohne Argumente, daher der Fehler:

'Window': 1 argument required, but only 0 present."

es die entsprechende Menge von Argumenten geben:

for (var i = 10; i > 0; i = i - 0.1) { //For the loop 
    load.style.opacity = i; 
    setTimeout(functionName, milliseconds); 
}

Wenn Sie stattdessen Ihre timeout() Funktion zu verwenden beabsichtigt, es nennen. Sie instanziieren gerade einen neuen setTimeout von dem, den Sie bereits in der Funktion timeout() erstellt haben.

Quelle

2017-02-07 14:56:19 Crowes

Ich bemerkte, dass es einen Fehler gab, aber ich hatte es bereits gepostet :( –

Dann fühlen Sie sich frei, eine unserer als die Antwort zu markieren, und nennen Sie es einen Tag. Beim nächsten Mal, stellen Sie absolut sicher, dass es keine Fehler gibt - die Konsole ist dein bester Freund! :) – Crowes

Grundsätzlich möchten Sie die Deckkraft mit einem rekursiven Aufruf Countdown. Hier gehen wir in Schritten von 0,01 von 1 auf 0. Der setTimeout löst den nächsten rekursiven Aufruf nach einer Pause von 50 ms aus. Diese Werte können natürlich nach Bedarf angepasst werden, aber die Deckkraft muss eine Zahl von 1 (sichtbar) bis 0 (unsichtbar) sein.

function setOpacity(el, lvl) { 
 
el.style.opacity = lvl; 
 
} 
 

 
function countDown(el, lvl) { 
 
    function action(el, lvl) { 
 
    return function() { 
 
     countDown(el, lvl); 
 
    } 
 
    } 
 
    setOpacity(el, lvl); 
 
    if (lvl > 0) { 
 
    lvl -= 0.01 
 
    setTimeout(action(el, lvl), 50); 
 
    } 
 
} 
 

 
function setup() { 
 
    var load = document.getElementById('img'); 
 
    load.style.opacity = 1; //Start at being visible 
 
    countDown(load, 1); 
 
} 
 

 
window.addEventListener('load', setup, true);

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>Webpage</title> 
 
    </head> 
 
    <body> 
 
     <div id="img"> 
 
     <img src="http://www.downgraf.com/wp-content/uploads/2014/09/01-progress.gif" width="200" height="150"> 
 
     </div> 
 
    </body> 
 
</html>

Quelle

2017-02-07 15:02:03 rasmeister

Das hilft, danke! –

Einziger Nachteil ist, dass es ein wenig lang ist ... –

Kein Problem, Ben. Es ist ein wenig ausführlicher als einige der anderen Antworten, aber ich dachte, dass es dir helfen könnte, den Kopf herumzukriegen, was vor sich geht. Sie können es beschleunigen, indem Sie den zweiten Parameter im setTimeout von 50 auf etwa 10 ändern. Dadurch wird das Fade 5-mal schneller. Diese Zahl gibt die Anzahl der Millisekunden an, die das Bild auf der aktuellen Deckkraft bleibt. – rasmeister

function setup() { 
 
\t var load = document.getElementById('img'); 
 
\t (function(){ 
 
\t \t var i = 1; 
 
\t \t setTimeout(function() { 
 
\t \t \t i -= 0.1; 
 
\t \t \t load.style.opacity = i; 
 
\t \t \t if (i > 0) { 
 
\t \t \t \t setTimeout(arguments.callee, 100); 
 
\t \t \t } 
 
\t \t }, 100); 
 
\t })(); 
 
} 
 

 
window.addEventListener('load', setup, true); //Add event listener for when the page is done loading

 <div id="img"> 
 
     <img src="http://www.downgraf.com/wp-content/uploads/2014/09/01-progress.gif" width="200" height="150"> 
 
     </div>

Quelle

2017-02-07 15:04:28 Laurianti

Können Sie bitte mehr dazu erklären? –

Natürlich ist dies eine rekursive Funktion. Argumente.callee ist die gleiche Anruferfunktion. Argumente ist è Objekt, das Eigenschaften über die Funktion enthält, ich hoffe, ich habe es erklärt, Entschuldigung für mein schlechtes Englisch – Laurianti

JavaScript Timeout-Funktion

Antwort

Verwandte Themen