Javascript: Funktionen Referenz oder Execution

Ein kleiner Ausflug in die Welt der Javascriptprogrammierung. Kurz vorweg, das ist nicht JQuery. Es gibt noch mehr Frameworks und andere Ansätze erlauben auch andere Dinge. Javascript ist da sehr flexibel.

Heute geht es um Funktionsreferenzen. Diese Funktion soll aufgerufen werden :

        function login() {

            var dummy = document.createElement("div");
            if ( dummy.loadURL("cmd/login",$("user").toURI()+"&"+$("pass").toURI()) ) {
                var result = dummy.getValue().trim();
                if ( result == "OK" ) {
                    $("anzeige").loadURL("cmd/listen","");
                } else {
                    $("errormsg").HTML("Leider konnten wir Sie nicht anmelden:
"+ result );
                }
            } else {
                    $("errormsg").HTML("Leider konnten wir Sie nicht anmelden:
"+ result );
            }
        }

Wie man leicht erkennen kann, gibt diese Funktion nichts zurück, soll Sie auch gar nicht.

Dieses kleine Beispiel verwendet die Funktion auf zwei Arten auf:

        window.onload = function() {
             $("anzeige").loadURL("anmelden.html","");
             $("loginbutton").onclick = login();
             $("anmelden").onclick = function(){
                 $("anzeige").loadURL("anmelden.html","");
                 $("loginbutton").onclick = login;
             }
         }

Jetzt raten Sie mal welche Version falsch ist 😉  OK, nicht so schwer. Natürlich ist das richtig:

             $("loginbutton").onclick = login;

Das onlick der Referenzzeiger für die Funktion ist, die beim Click auf das Element ausgeführt werden soll, dürfte bekannt sein, genau  onKeyUp, onKeyDown, onDrag usw. . für andere Events da sind.

Beim Klick auf das LoginButton soll also der Login erfolgen. Wenn man nun aber statt login login() schreibt,  dann wird die Funktion login gleich ausgeführt. Was zur Folge hat, daß obigen Code eine Webseite lädt und in ein Element schreibt, feststellt, daß es nicht ging und eine Errormeldung ausgibt. Der Klick auf das Loginbutton führt dann bestenfalls zu gar nichts, schlimmstenfalls zu einem Crash des Javascriptinterpreter, das kommt auf die Güte des Interpreters an. Kurz um, es passiert nicht was man wollte.

Jetzt die natürlich die Frage, gäbe es für login() auch eine legitime Verwendung, weil sonst könnte der Javascriptsyntaxchecker ja einfach mal vorher meckern.

Die Antwort ist leicht: Ja, die gibt es.

function test() {

     if ( window.location.href  == "meinefiktiveURL" ) {
           return function() {
                alert("Hallo");
           };
     }

     return function() { alert("Hier sind Sie falsch"); };
};

$("alarmknopf").onclick = test();

Damit sich darin ein Sinn ergibt, habe ich eine IF-ELSE Anweisung benutzt. Ich kann also dynamisch festlegen was passieren soll, wenn der Alarmknopf gedrückt wird. Vorteil, die IF-Abfrage wird nur einmal ausgeführt, nicht ständig, wenn jemand auf den Knopf drückt. Das ist natürlich bei einem einmaligen Event egal, aber bei Funktionen die mehrere tausend mal pro Sekunde aufgerufen werden, kann das grade bei Javascript zum Flaschenhals werden.

Natürlich kann man das auch so machen wie folgt, aber dann muß man das für jeden Knopf machen – Folge: es verbraucht mehr Ressourcen:

$("alarmknopf").onclick = function () {

        if ( window.location.href  == "meinefiktiveURL" ) {
                alert("Hallo");
        } else {
                alert("Hier sind Sie falsch");
        };
};