javascript - 在函数内部调用函数 - 问题 :function not executing

Question

好的。我想首先道歉，因为我什至不知道如何正确地标题这个问题。我将尝试解释:我有一个这样的工作代码，但它有点困惑，所以我试图将它分成小函数。整个过程就是一个模拟的滚动条:

-div id="scrollbar"代表滚动条轨道。
-div id="scrollbar"的唯一子元素代表滚动条 slider 。

现在。每当 document.documentElement 中发生“onmousedown”事件时，就会执行函数 checkAndPerform(e)。checkAndPerform(e) 获取滚动条的边框并调用以下函数:

-checkClick(e):检查滚动条内是否发生点击，返回 true 或 false。

-perform():如果 checkClick 的结果为 true，则将拇指移动到单击位置。此外，它还会向下滚动滚动条操作的部分(部分 id="ejercicios")。最后，它向 document.documentElement 添加了一个“mousemove”EventListener，并附加了函数 followMe(e)。此 followMe 函数调用一个限制滚动到轨迹栏边框的函数。之后，当“mousemove”处于事件状态时，它会执行 div 的平移和部分的滚动，最后调用函数release()，该函数添加一个“mouseup”EventListener，以在释放鼠标按钮后删除 followMe 函数。

代码的想法在这里:

How can I retrieve all mouse coordinates between mousedown to mouseup event ，您可以在接受的答案中看到名为“trackPoints”的函数被称为无问题(就像我之前的代码中一样)。

所以，这是令人麻烦的 JavaScript 代码:

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);

此外，这是一个 jFiddle:https://jsfiddle.net/pa0exs4q/如果您觉得有趣，我可以提供工作代码，但正如我所说，它确实很困惑且写得不好。问题是流程中的第二个函数(checkClick)甚至没有被调用。我尝试将其称为 (checkClick(e))，在这种情况下它会运行，但无法识别上面在 checkAndPerform 中定义的变量。在我的工作代码中，一切都是唯一的功能，所以我认为这可能是一个范围问题，但我对任何想法持开放态度。

Answer 1

如果您有一个名为 myFunction 的函数，您可以将其简单地传递为 myFunction，但要实际调用它，您必须将其编写为 myFunction( )。所以这个:

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;
  }
}

应该变成这样:

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
  }
}

如果没有看到相应的标记，在我看来，这似乎是代码中最有可能、最明显的问题。