JavaScript function pausieren

Hallo nochmal,

langsam zweifle ich an meinem Verstand! Ein Fan von JavaScript werde ich in diesem Leben wohl wirklich nicht mehr...

Folgender Code:

function punktung() {
    var punkte = document.getElementById("punkte");
    if ( punkte.innerHTML.length > 3 ) {
        punkte.innerHTML = "";
        clearinterval(dots);
        setTimeout(function (){losgehts()}, 5000);
    }
    else  {
        punkte.innerHTML += ".";
    }
}

function losgehts() {
var dots = window.setInterval( function() { punktung() },500);
}

losgehts();

Das Script schreibt immer vier Punkte in ein Div und soll, nachdem die vier Punkte geschrieben wurden und die ID "Punkte" auf "" gekürzt wird, 5 Sekunden pausiert wird - danach das Gleiche wieder von vorne.

Ich lösche also den Interval "dots" und pausiere 5000 Millisekunden und rufe danach wieder die function "losgehts()" auf - warum funktioniert es aber wieder nicht? Es wird einfach keine Pause gemacht, sondern nach dem Kürzen einfach wieder von Vorne begonnen. Warum?

Über Antworten bin ich dankbar!

Grüße, Hummel

3 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

rmnstr

26.05.2015, 17:27

var legt eine neue Variable fest, deren Gültigkeitsbereich den kompletten Funktionsblock umfasst. Wird sie außerhalb einer Funktion definiert, ist die Variable global gültig.

In deinem Beispiel wird var dots allerdings in einer Funktion definiert. Das heißt, dots ist nur innerhalb von losgehts() gültig.

Übrigens musst du nicht jedes mal eine anonyme Funktion erstellen, wenn du setInterval oder setTimeout aufrufst. Du kannst die Funktionen direkt übergeben.

var dots;


function punktung() {
  var punkte = document.getElementById("punkte");
  if ( punkte.innerHTML.length > 3 ) {
    punkte.innerHTML = "";
    window.clearInterval(dots);
    setTimeout(losgehts, 5000);
  }
  else {
    punkte.innerHTML += ".";
  }
}


function losgehts() {
  dots = window.setInterval(punktung,500);
}


losgehts();

hummelxy

Fragesteller

27.05.2015, 15:03

Hallo rmnstr,

vielen Dank für deine Antwort, jetzt habe ich es verstanden!

Die Auszeichnung als "hilfreichste Antwort" folgt natürlich noch.

Grüße, Hummel

rmnstr

27.05.2015, 20:02

@hummelxy

Danke :)

userfromberlin

26.05.2015, 16:33

clearInterval, nicht clearinterval

userfromberlin

26.05.2015, 16:40

Mal von dem Fehler abgesehen ist die Funktion echt cool. Ich würde Dich unabhängig von Deiner Frage gerne frage, ob Du etwas dagegen hast, wenn ich den Code ohne Quellenangabe auf meiner Webseite verwende?

hummelxy

Fragesteller

26.05.2015, 17:07

@userfromberlin

Hallo userfromberlin,

leider funktioniert das Script trotzdem nicht mit der Pause... Hier mal in action: https://jsfiddle.net/Lv8ueocf/

-> Es soll nach dem Kürzen auf null des Strings eine 5 Sekunden - Pause gemacht werden, das Script schreibt aber direkt weiter, warum?

Gerne kannst du das Script bei dir nutzen, hier ist es jetzt ohnehin publiziert ;-)

Grüße,

Hummel

userfromberlin

26.05.2015, 17:21

@hummelxy

Der nächste Fehler: Du hast die Variable "dots" lokal gestaltet, die muss aber global sein (ohne var vor).

Vielen Dank für die Erlaubnis, den Code zu benutzen! Ich freue mich schon sehr für meine Seite (-;.

yerooke

26.05.2015, 16:33

Ein kleiner Fehler - schreibe anstatt clearinterval doch bitte clearInterval

hummelxy

Fragesteller

26.05.2015, 17:05

Hallo yerooke,

selbst mit dieser Verbesserung funktioniert das Script nicht, wie es soll. Die Pause wird nicht gemacht - warum?

Hier mal in action: https://jsfiddle.net/Lv8ueocf/

-> Nachdem alle Punkte auf null gekürzt wurden, soll 5 Sekunden TimeOut sein, es wird stattdessen aber direkt weiter gemacht.

Hast du eine Idee warum?

Grüße,

Hummel

yerooke

26.05.2015, 18:54

@hummelxy

Wie mein Vorredner sagte, du versuchst in einer Funktion die Variable der anderen Funktion anzusprechen, das geht nicht da die Variablen in einer Funktion nur für diese gelten.

Umgehen kannst Du das wenn Du die Variable Global definierst - sprich in JavaScript definiert man die Variablen Global ohne das var vorneweg.

Hier dein Beispiel:

https://jsfiddle.net/Lv8ueocf/2/

hummelxy

Fragesteller

27.05.2015, 15:03

@yerooke

Vielen Dank für deine Hilfe, habe den Fehler verstanden!

Ähnliche Fragen

JavaScript function beenden

Hallo zusammen,

folgende Codes:

function blabla(abbrechen) {

    if (abbrechen == "JA") {
    return;
    }

    if (window.XMLHttpRequest) {
        xmlhttp=new XMLHttpRequest();
    }
    
    else {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("ausgabe").innerHTML=xmlhttp.responseText;
        }
    }
    
    xmlhttp.open("GET","blablabla.php",true);
    xmlhttp.send();
    
}



setInterval(function () {blabla()}, 5000);
var abbrechen = "JA";
setTimeout(function (){blabla(abbrechen)}, 10000);

Ich verstehe leider nicht, warum meine Function "blabla" nicht nach 10 Sekunden beendet wird. Immerhin gebe ich das mit

setTimeout(function (){blabla(abbrechen)}, 10000);

doch an?!

Über eine Aufklärung wäre ich dankbar!

-> Ich möchte einfach nur, dass die obige Funktion mit dem Interval alle 5 Sekunden ausgeführt wird, aber darunter nach 10 Sekunden mit TimeOut beendet wird. Was passt dem Programm nicht?

Grüße, Hummel

...zur Frage

Bilder bei jquery/JavaScript nach bestimmter zeit austauschen?

Erstmal entschuldigung für die komische Überschrift, ich schmeiße manchmal die beiden gerne durcheinander.

Ich hab auf meiner Seite einen Timer (fürs Beispiel 30s), der mit einem Button gestartet werden. Am Anfang soll Bild1 stehen. Nachdem der Timer bei der Hälfte der Zeit angekommen ist (hier 15s) soll Bild2 dort erscheinen wo Bild1 vorher war. Ist der Timer bei 0 angekommen, wird man auf eine andere Seite weitergeleitet.

Wie mache ich das am besten?

Hier mein bisheriger Code

$(document).ready(function (e) {

var $timer = $("#timer");

var stop = false;

var timerLoop;

$( "#button_start" ).click(function() {

timerLoop = setInterval(function(){ update() }, 1000);

});

function update() {

if(!stop){

var myTime = $timer.html();

var ss = myTime.split(":");

var dt = new Date();

dt.setHours(0);

dt.setMinutes(ss[0]);

dt.setSeconds(ss[1]);

var dt2 = new Date(dt.valueOf() - 1000);

var temp = dt2.toTimeString().split(" ");

var ts = temp[0].split(":");

if(ss[0] === "00" && ss[1] === "01"){

stop = true;

clearInterval(timerLoop);

$("body").load( "./erfolgreich.html" );

}

$timer.html(ts[1]+":"+ts[2]);

//setTimeout(update, 1000);

}

});

...zur Frage

JavaScript: trigger() wird nicht ausgelöst?

Hi zusammen,

ich versuche mit JavaScript ein paar input-Felder zu validieren.

Leider wird die Seite nicht abgeschlossen, nachdem alle Felder befüllt wurden.
Hat jemand eine Idee?

Ich muss immer, nachdem alle Felder befüllt sind, nochmals in irgendein input-Feld klicken, damit es geht.

Hier mein Code:

$(document).ready(function() {
  $('input').on('click',function() {
    // Validation
    var vorname_firma = $("input[name='vorname']").val();
    var strasse = $("input[name='strasse']").val();
    var plz = $("input[name='plz']").val();
    var ort = $("input[name='ort']").val();

    if (vorname_firma != "" && strasse != "" && plz != "" && ort != "") {
      $(function() {
        $('#tab3').trigger("click");
      });
    }
  });
});

...zur Frage

Besucherzähler per JavaScript auf Website?

Hi, ich würde gerne auf meiner Website einen Besucherzähler haben. Dieser soll immer dann, wenn ein Besucher auf die Website kommt um ein erhöht werden. War der Benutzer schon mal auf der Website, so soll nicht erhöht werden. Das ganze soll dann ganz einfach als Zahl dargestellt werden.

Hier meine Lösung dafür, dass nur neue Nutzer registriert werden:

var visitor_name = "Visitor: ";


window.onload = visitor;
function visitor() {
    visitor = localStorage.getItem(visitor_name);
    if (visitor == null) { //wenn noch nichts in Storage ist...
        visitor = 1;
        localStorage.setItem(visitor_name, visitor);
        console.log("Neuer Benutzer registriert!");
    } else if (visitor != null) { //wenn schon irgendwas im Storage ist...
        console.log("Benutzer bereits registriert!");
    }
}

Wie kann ich (nur mit JS) jetzt eine Zahl auf meiner Website anzeigen lassen, die sich immer erhöht, sobald ein neuer User joint? Das muss nicht live oder irgendwie sein, einfach nur für mich zum schauen, reicht also wenns bei Seitenreload funktioniert :).

...zur Frage

JavaScript Await Async, Wo ist der Fehler?

function test1(zahl) {
    setTimeout(() => {
        return(zahl *2)
    }, 5000);
  }
async function test2() {
let x = await test1(2);
}
test2().then.alert(x)

Output: ReferenceError: x is not defined

Wollte das eigentlich so machen das die Funktion Test2 wartet bis die Funktion Test1 fertig ist, das sind jetzt zum Beispiel 5 Sekunden.

Und dann soll es x alerten.

Also möchte so tun als würde etwas länger dauern als geplant.

Könnten ja auch 10 Sekunden sein, die Hauptsache ist das wartet bis es die Antwort bekommen hat.

(Ich habe Async und Await nicht wirklich verstanden, und dachte mir das es so Funktioniert und ein gutes Beispiel ist)

...zur Frage

BMI Rechner Programm in Javascript

Hallo,

wisst ihr, was ich in meinem JavaScript-Code falsch gemacht habe (Es sind zwei Eingabefelder da, Gewicht in kg und Grösse in cm; dann berechnet und sagt, ob der Anwender Über- oder Untergewicht hat).

...
function Bmi()
    {
        var Gewicht = document.BmiFormular.Gewicht.value;
        var Groesse = document.BmiFormular.Groesse.value / 100;

        var BmiZahl = Gewicht / (Groesse * Groesse);

        var Was = (BmiZahl < 18,5) ? "Untergewicht" :
        "Normalgewicht";

        alert (BmiZahl + "\n" + "Sie haben " + Was);
    }
...

<form name="BmiFormular" action="">
<input type="text" name="Gewicht" value="Gewicht eingeben! (in kg)"        onClick="this.value=''" /><br />
<input type="text" name="Groesse" 
       value="Körpergrösse eingeben! (in cm)" 
       onClick="this.value=''" /><br /><br />

    <input type="button" width="60" value="BMI berechnen!" 
           onClick="Bmi()" />
  </form>

Die Variable BmiZahl erklärt sich von selbst, die Variable "Was" steht

...zur Frage

Wie erstelle ich eine Seite,wo das Audiodatei automatisch spielt?

Hallo Leute,

Zurzeit beschäftige ich mich mit Javascript und möchte,dass bei einer Seite die Audiodatei automatisch anfängt zu spielen,sobald ich die seite öffne.

Das ist mein Javascript Code:

function ton() {

var audio=document.getElementById("audio");

audio.innerHTML='<audio autoplay><source src="WIN_20211211_16_26_17_Pro.mp4" type="audio/mpeg"/></audio>';

}

</script>

...zur Frage

JavaScript: Wie kann ich ein Bild in mein Canvas einfügen?

Servus!

Ich möchte gerne ein Bild in mein Canvas einfügen. Es klappt aber nicht und die Konsole zeigt auch keine Fehlermeldungen an.

Ich habe folgenden Code:

var canvas = document.getElementById("gameScreen");
var context = canvas.getContext("2d");
var imgBall = document.getElementById('img_ball');

function make_ball() {
  imgBall = new Image();
  imgBall.onload = function() {
    context.drawImage(imgBall, 10, 10);
  }
}

make_ball();

In der HTML-Datei habe ich noch src und die id (img_ball) in das img-Tag geschrieben.

Vielleicht findet ja von euch jemand den Fehler.

Dankeschön.

...zur Frage

JavaScript interval mehrmals aufrufen?

Hallo, ich habe das Problem, dass ich ein Interval mehrmals aufrufen möchte.

Jedoch kann ich immer nur eines abbrechen.

Ich hätte das Abbrechen so versucht:

clearInterval(interval + thema);

Funktioniert leider nicht.

                var zahl = 0;
                var intervalphp = setInterval(erhoeheZahl, 100, 90, 'php');
                var intervalcss = setInterval(erhoeheZahl, 100, 100, 'css');


                function erhoeheZahl(max, kreis, thema) {
                    zahl++;
                    console.log(zahl);
                    document.getElementById(kreis).innerHTML = zahl;
                    document.getElementById(kreis + 'kreis').style.background = `conic-gradient(#712e1e ${zahl * 3.6}deg, #ffd5af 0deg)`;


                    if (zahl >= max) {
                        clearInterval(interval + thema);
                    }
                }

Danke im voraus!

...zur Frage

Wie sende ich Variablen von JavaScript nach Flask via jQuery?

Hallo,

ich bin in JavaScript/jQuery und auch Python/Flask noch ein ziemlicher Anfänger. Ich versuche gerade, einfach nur ein JSON-Objekt aus JavaScript in einem HTML-Template mit Flask anzuzeigen.

Hier mein Code:

Flask:

from flask import Flask,request, render_template

app = Flask(__name__)

@app.route("/")
def rofl():
  return render_template("test.html")

@app.route("/test", methods=['POST'])
def test():
  Namensliste = request.get_json(True)
  print(Namensliste)
  return render_template("rofl.html", Namensliste=Namensliste)

if __name__ == '__main__':
  app.run(port=5200)

test.html:

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <form action="#" method="post">
    <button type="button" onclick="JSONTest()"> Send UserInfo</button>
  </form>
</body>

rofl.html:

<head>
  <meta charset="UTF-8">
  <title>Titel</title>
</head>
<body>
  NamensListe: {{Namensliste}}
</body>

JavaScript-Datei:

var myJason = {
  "name1" : "Jens",
  "name2" : "Josef",
  "name3" : "Johannes"
}

function JSONTest() {
  var MyJason= JSON.stringify(myJason);
  console.log(MyJason)
  $.ajax({
    type: 'POST',
    url: '/test',
    data: MyJason,
    success: function(data) {
      console.log(data, "Rückmeldung1");
  }});
}

Wie mein Code eigentlich funktionieren soll ist: Ich rufe die Route "/" auf, drücke auf den Button: "JSONTest()" und meine Funktion sendet via jQuery mein JSON-Objekt an "/test". Dort wird das Objekt in Namensliste gespeichert und rofl.html mit der Namensliste darin aufgerufen.

Ich weiß, dass hier wahrscheinlich viele Grundlagenfehler drin sind, aber ich habe wirklich ewig lang gegooglet und finde einfach nicht, wie man es richtig macht.

Danke schon einmal für jede Idee.

...zur Frage

Mehrere Parameter durch einen Button ausgeben in Javascript?

Ich lerne gerade Javascript mit einer Tutorial Reihe und der Mann im Tutorial hat mehrere Parameter benutzt um einen Liebes Test zu Programmieren. Ich wollte dann das man erst einen Knopf drücken muss um das Ergebnis angezeigt zu bekommen. Aber es funktioniert nicht denn wenn ich auf den Button drücke, passiert nichts. woran liegt das ? Das ist mein Code: (Die formatierung ist eigentlich anders)

<!DOCTYPE html>

<html>

<head>

</head>

<body>

function LiebesTest(name1, name2){

document.write(name1 + " und " + name2 + " haben " + punkte + " Punkte ");

var punke;

punkte= (name1+name2).length;

}

LiebesTest("Filme", "serien");

</script>

<form>

<input onclick="text" type="button" value="Test!"

</form>

</body>

</html>

...zur Frage

[JavaScript] Wie kann ich ein Element von Anfang an unsichtbar machen?

Und nach einem erfolgreichem Login wieder sichtbar machen. Ich habe folgenden Code:

function getKey() {


  var visible = document.getElementById("download").style.display = "visible";
  var invisible = document.getElementById("download").style.display = "none";


  var key = "abc1";


  var keY = document.getElementById("key").value;


  if (key == keY) {
    visible;
    alert("r")


  } else {
    alert("w")
  }

Weder funktioniert er, noch wird das Element download wieder angezeigt.

...zur Frage

Wie kann ich mit JavaScript ALLE aktuell laufenden Geräusche beenden?

Wenn eine neue Audio startet sollen erst alle noch laufenden Audios beendet werden, damit man immer nur eine hört und nicht mehrere. Mein Code sieht zurzeit so aus:

function play1() {
    var audio = new Audio('Music/1.mp3');
    audio.play();
    audio.addEventListener('ended', (event) => {
        play2();
    });
}

function play2() {
    var audio = new Audio('../002/Music/1.mp3');
    audio.play();
    audio.addEventListener('ended', (event) => {
    });
}

und es gibt jeweils 1 Knopf für play1 und play2 zum starten.

...zur Frage

Javascript Nummer mit 0 vorne?

Wie kann ich eine function schreiben die so aussieht? Wenn "Zahl" < 10 füge 0 vor die Zahl also wenn die Zahl 9 ist soll es "09" ausgeben? Vielen Dank für antworten :)

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen