Bei Übergabe Argument an eine Callback-Funktion

Question

Ich habe einige Ambiguität in Javascript Callback-Funktionen.

Der erste Code ist wie folgt strukturiert:

function firstFunction() 
{ 
var message = "something"; 
secondFunction(message); 
} 

function secondFunction(message) 
{ 
    var myButton = document.getElementById("my-button"); 
    myButton.addEventListener('click',thirdFunction(message)); 
} 

function thirdFunction(message) 
{ 
console.log("the messages is: "+message); 
} 

Als ich das Drehbuch oben ausgeführt, die thirdFunction ohne Klicken auf die Schaltfläche ausgeführt wird.

Nach ein paar Recherchen habe ich über die closure in Javascript gelesen. Dann habe ich den Code in die folgende Struktur geändert:

function firstFunction() 
{ 
var message = "something"; 
secondFunction(message); 
} 

function secondFunction(message) 
{ 
    var myButton = document.getElementById("my-button"); 
    myButton.addEventListener('click',thirdFunction); 
} 

function thirdFunction(message) 
{ 
    return function(){ 
    console.log("the messages is: "+message); 
    } 
} 

Ich habe das erwartete Ergebnis. Die thirdFunction wird nur ausgeführt, wenn auf die Schaltfläche geklickt wird.

Ich bin nicht sicher, ob ich meine zweite Code-Struktur richtig ist? Ich bin mir nicht sicher, ob ich das Schließungskonzept richtig verstehe, da ich vorher noch nie eine Funktion in der konventionellen Programmierung zurückgegeben habe. Das ist ein neues Konzept für mich. Bitte korrigiere mich wenn ich falsch liege.

EDIT: Einige der Lösungen schlagen vor, es wie folgt zu schreiben:

myButton.addEventListener('click', function() { thirdFunction(message) }); 

Für die Lesbarkeit des Codes, ich versuche, dies zu vermeiden. Ich bevorzuge es, den Code für die thirdFunction außerhalb der secondFunction zu platzieren.

Answer 1

eine anonyme Funktion wird den Verschluss in der richtigen Umgebung zu machen:

function secondFunction(message) 
{ 
    var myButton = document.getElementById("my-button"); 
    myButton.addEventListener('click', function() { 
    thirdFunction(message) 
    }); 
}