Javascript：在另一个函数中调用函数答案

【问题标题】：Javascript: call function inside another functionJavascript：在另一个函数中调用函数
【发布时间】：2017-05-11 16:18:34
【问题描述】：

我有一个简单的代码，它在用户按下“A”时调用函数 func1()。在 func1() 内部，我希望，如果满足某个条件，则调用另一个函数 func2() 并停止 func1()。（我正在做的一个简短示例如下所示）。我怎样才能做到这一点？谢谢！

  <html>
    <head>
    </head>



    <body> 

      <script>
      $(document).ready(function() {
          document.addEventListener("keydown", function (e) {            

              else if  (e.keyCode === 83) { // If "S" is pressed the game starts
                 func1(); 
              }
          }); 
        }) 
          function func1(){   
             $(document).ready(function() {                 

                  document.addEventListener("click", function(e) {   
                    var myVar = Math.floor( Math.random() *6);


                       if (myVar>3){ 
                        func2();                           
                        }

            }, false);  
        });
      } 

      function func2(){ 
      /////  
      }             

</script>

【问题讨论】：

您将$(document).ready() 嵌套在 func1 内部，这将阻止内部代码触发。 ready 事件已经触发，这是第一次评估您的 javascript 时。当您调用 func1 时，它正在等待添加事件侦听器 click，直到文档第二次触发了 ready 事件，这不会发生。
@JoeLissner 在这种情况下是不正确的。与事件处理程序的浏览器实现不同，jQuery 会将.ready() 回调排队并触发它们，即使事件已经执行。请参阅here - “但是，jQuery 的 .ready() 方法在一个重要且有用的方面有所不同：如果 DOM 准备就绪并且浏览器在代码调用 .ready(handler) 之前触发 DOMContentLoaded，则函数处理程序仍将被执行。相反，在事件触发后添加的 DOMContentLoaded 事件侦听器永远不会执行。"
@War10ck 今天学到了一些东西 :)
@JoeLissner 见stackoverflow.com/questions/36143711/…

标签： javascript jquery function

【解决方案1】：

您需要重构代码并删除对$(document).ready() 的不必要调用。我假设这是您要禁用的点击事件... 让我知道它是否是您要禁用的按键。

编辑：我编辑了代码以在按下 's' 键时删除 func2 事件侦听器，并在调用 func2 时将点击事件侦听器添加到文档中。

$(document).ready(function() {
  document.addEventListener("keydown", function(e) {
    var keyCode = e.which || e.keyCode;
    $('.keypressed').html(String.fromCharCode(keyCode));
    if (keyCode === 83) { // If "S" is pressed the game starts
      document.removeEventListener('click', helper2);
      func1();
    }
  });
});
//refactored the handler function to stand on its own
function helper(e) {
  var myVar = Math.floor(Math.random() * 6);

  console.log('myVar in func1() = ', myVar);


  if (myVar > 3) {
    func2(e);
    return;
  }
}

function helper2(e) {
  
  console.log('func2() click event called!')
}

function func1() {
  document.addEventListener("click", helper, false);
}

function func2(e) {
  //disable the click event listener
  document.removeEventListener('click', helper);
  document.addEventListener('click', helper2)
  console.log('called func2()');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
</head>
<div class="keypressed"></div>

<body>
</body>

</html>

【讨论】：

谢谢。恐怕还是有些东西不能正常工作。我没有提到的是 func2() 也有一个“点击”事件监听器。当我是 func2() 时，我想禁用 func1() 的事件侦听器，反之亦然。有什么想法吗？
您可以在 func1 中执行我在 func2 中所做的相同操作。只需外部化事件处理函数，并在调用 removeEventListener() 时使用它。我将编辑我的代码以反映这一点。

【解决方案2】：

您可以使用.off() 删除附加到jQuery 对象的事件监听器。不需要在func1 内调用.ready()。

else..if 应该是if，除非在问题的javascript 中没有包含if 语句。

$(document).on("keydown", function() {
  if (/* condition */) {
    $(this).off("keydown");
    func1();
  }
});

function func1() {
  $(document).on("click", function() {
    if (/* condition */) {
      $(this).off("click");
      func2();
    }
  })
}

【讨论】：

谢谢。如果我添加 $(document) 而不是 document，似乎会有问题。