javascript - 这个函数与按钮循环的原因是什么？

Question

我最近遇到了一些代码问题，我需要帮助修复它。基本上，我使用 jQuery 将按钮附加到网站。我使用了大量的函数来为那个特殊的网站制作一个迷你 Angular 色扮演游戏。

例如，纽扣闭合器和纽扣制造器。两者都是函数；按钮创建者使用 .append() 为游戏的 UI 制作一些按钮，按钮关闭者使用 .remove() 删除这些按钮。然后，我使用 .on("click",function(){//code }) 将 onClick 绑定(bind)到一些按钮。这些功能还包括许多其他功能，带有返回上一个功能的按钮等。

不幸的是，它们似乎无休止地循环。我相信按钮是造成这种情况的原因。有什么解决办法吗？

我建议不要运行该代码，因为它可能会使选项卡崩溃或使其无响应。

示例代码:

function buttonMaker1(){
  $('body').append('<button id="btn1">Button 1</button>');
}
function buttonMaker2(){
  $('body').append('<button id="btn1">Button 1</button>');
  $('body').append('<button id="btn2">Button 2</button>');
}

function buttonRemover(){
  if($('#btn1').length){
    $('#btn1').remove();
  }
  if($('#btn2').length){
    $('#btn2').remove();
  }
}
function menu(){
  buttonRemover();
  buttonMaker2();
  $('#btn1').on("click",myFunction());
  $('#btn2').on("click",myFunction());
}
function myFunction(){
  buttonRemover();
  buttonMaker1();
  $('#btn1').on("click",menu());
}
menu();

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

Answer 1

将处理程序绑定(bind)到函数时，只需给出函数名称即可。在函数名称后面加上括号会调用当时的函数，而不是事件发生时的函数。

function buttonMaker1(){
  $('body').append('<button id="btn1">Button 1</button>');
}
function buttonMaker2(){
  $('body').append('<button id="btn1">Button 1</button>');
  $('body').append('<button id="btn2">Button 2</button>');
}

function buttonRemover(){
  if($('#btn1').length){
    $('#btn1').remove();
  }
  if($('#btn2').length){
    $('#btn2').remove();
  }
}
function menu(){
  buttonRemover();
  buttonMaker2();
  $('#btn1').on("click",myFunction);
  $('#btn2').on("click",myFunction);
}
function myFunction(){
  buttonRemover();
  buttonMaker1();
  $('#btn1').on("click",menu);
}
menu();

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