Aufruf von Funktionen innerhalb von Funktionen - Fehler: Funktion wird nicht ausgeführt

Question

Ok. Ich möchte mich zuerst entschuldigen, weil ich nicht einmal weiß, wie ich diese Frage richtig schreiben soll. Ich werde versuchen zu erklären: Ich habe einen Arbeitscode für diese Art von Arbeiten, aber es ist ein bisschen chaotisch, also versuche ich es in kleine Funktionen zu teilen. Der gesamte Prozess ist eine simulierte Bildlaufleiste:

-div id = "Bildlaufleiste" steht für die Bildlaufleiste.
-div id = "scrollbar" 's einziges Kind repräsentiert den Scrollbalken-Daumen.

Jetzt. Immer wenn ein "onmousedown" -Ereignis in document.documentElement stattfindet, wird die Funktion checkAndPerform (e) ausgeführt. checkAndPerform (e) ruft die Grenzen der Bildlaufleiste ab und ruft die folgenden Funktionen auf:

-checkClick (e): Es wird geprüft, ob innerhalb der Bildlaufleiste ein Klick aufgetreten ist und ob die Eingabe wahr oder falsch ist.

-perform(): Wenn das Ergebnis von checkClick true ist, wird die Position zwischen Daumen und Klick verschoben. Außerdem scrollt es den Abschnitt herunter, in dem die Bildlaufleiste arbeitet (Abschnitt id = "ejercicios"). Schließlich fügt es dem Document.documentElement einen "mousemove" EventListener hinzu, dem die Funktion followMe (e) beigefügt ist. Diese Funktion followMe ruft eine Funktion auf, die Scroll-to-Trackbar-Grenzen begrenzt. Danach führt es die Übersetzung von div und scrolling des Abschnitts durch, während "mousemove" aktiv ist, und ruft schließlich eine Funktion release() auf, die einen "mouseup" EventListener hinzufügt, um die followMe-Funktion nach dem Loslassen der Maustaste zu entfernen.

Die Idee für den Code wurde hier bekommt:

How can I retrieve all mouse coordinates between mousedown to mouseup event, wo Sie in akzeptierter Antwort sehen, die „Track-“ wird ungetrübten genannt aufgerufenen Funktion (wie es in meinem vorherigen Code).

So, hier ist es Javascript-Code beunruhigend:

function getHeight(object) { 
    var height = object.getBoundingClientRect().bottom - object.getBoundingClientRect().top; 
    return height; 
} 

function checkClick(e) { 
    console.log("x:" + e.pageX, "y:" + e.pageY); 
    if (e.pageX > sBLeft - 5 && e.pageX < sBRight + 5 && e.pageY < sBBottom && e.pageY > sBTop) { 
     adentroBar = true; 
     console.log("meas adentro"); 
    } else { 
     adentroBar = false; 
     console.log("meas afuera"); 
    } 
    return adentroBar; 
} 

function scrollLimited(e) { 
    if (e.pageY < sBTop) { 
     translateY = 0; 
    } else if (e.pageY > sBBottom) { 
     translateY = getHeight(scrollBar) - getHeight(thumb); 
    } else { 
     translateY = e.pageY - sBTop - .5 * getHeight(thumb); 
    } 
} 

function followMe(e) { 
    scrollLimited; 
    thumb.style.transform = "translate3d(0," + translateY + "px,0)"; 
    document.getElementById('ejercicios').scrollTop = translateY * ratio; 
    document.documentElement.addEventListener("mouseup", release, false); 
} 

function perform() { 
    if (adentroBar === true) { 
     translateY = e.pageY - sBTop - getHeight(thumb)/2; 
    } 
    thumb.style.transform = "translate3d(0," + translateY + "px,0)"; 
    document.getElementById('ejercicios').scrollTop = translateY * ratio; 
    document.documentElement.addEventListener("mousemove", followMe, false); 
} 

function release() { 
    document.documentElement.removeEventListener("mousemove", followMe, false); 
} 

function checkAndPerform(e) { 
    var translateY, adentroBar, scrollBar = document.getElementById('scrollbar'), 
     thumb = scrollBar.getElementsByTagName("div")[0], 
     sBLeft = scrollBar.getBoundingClientRect().left, 
     sBRight = scrollBar.getBoundingClientRect().right, 
     sBTop = scrollBar.getBoundingClientRect().top, 
     sBBottom = scrollBar.getBoundingClientRect().bottom, 
     preg = document.getElementById('preguntas'), 
     ratio = preg.offsetHeight/(getHeight(scrollBar) - getHeight(thumb)); 
    if (e.which === 1) { 
     checkClick; 
     perform; 
    } 
} 
document.documentElement.addEventListener("mousedown", checkAndPerform, false); 

Auch hier ist es ein jFiddle dafür: https://jsfiddle.net/pa0exs4q/ ich den Arbeits Code bereitstellen, falls Sie es interessant finden, aber wie gesagt Es ist wirklich chaotisch und porly geschrieben. Problem ist zweite Funktion im Fluss (checkClick), wird nicht einmal aufgerufen. Ich habe versucht, es als (checkClick (e)) zu nennen, in diesem Fall wird es ausgeführt, aber erkennt die oben definierten Variablen in checkAndPerform nicht. In meinem Arbeitscode war alles eine einzige Funktion, also denke ich, dass es ein Problem mit dem Oszilloskop sein könnte, aber ich bin offen für irgendwelche Ideen. Entschuldigung für mein Englisch und danke im Voraus!

Answer 1

Wenn Sie eine Funktion mit dem Namen myFunction haben, können Sie es einfach als myFunction weitergeben, aber um es tatsächlich zu nennen, müssen Sie es als myFunction() schreiben. So folgt aus:

function checkAndPerform(e){ 
    var translateY, adentroBar, scrollBar=document.getElementById('scrollbar'), thumb=scrollBar.getElementsByTagName("div")[0], sBLeft=scrollBar.getBoundingClientRect().left, sBRight=scrollBar.getBoundingClientRect().right, sBTop=scrollBar.getBoundingClientRect().top, sBBottom=scrollBar.getBoundingClientRect().bottom, preg=document.getElementById('preguntas'), ratio=preg.offsetHeight/(getHeight(scrollBar)-getHeight(thumb));  

    if (e.which===1){ 
    checkClick; 
    perform; 
    } 
} 

Sollte diese:

function checkAndPerform(e){ 
    var translateY, adentroBar, scrollBar=document.getElementById('scrollbar'), thumb=scrollBar.getElementsByTagName("div")[0], sBLeft=scrollBar.getBoundingClientRect().left, sBRight=scrollBar.getBoundingClientRect().right, sBTop=scrollBar.getBoundingClientRect().top, sBBottom=scrollBar.getBoundingClientRect().bottom, preg=document.getElementById('preguntas'), ratio=preg.offsetHeight/(getHeight(scrollBar)-getHeight(thumb));  

    if (e.which===1){ 
    checkClick(e); 
    perform(e); // make sure to pass e and expect it in perform, otherwise it won't have access to it 
    } 
} 

Ohne Ihre entsprechende Markup zu sehen, dies das wahrscheinlichste und eklatantes Problem in Ihrem Code zu mir scheint. Viel Glück!