JavaScript 嵌套函数：如何避免循环答案

【问题标题】：JavaScript nested functions : how to avoid loopsJavaScript 嵌套函数：如何避免循环
【发布时间】：2017-05-30 20:42:15
【问题描述】：

我正在创建一个带有不同步骤的小 javascript/jQuery 应用程序。为此，我正在使用具有不同功能的 js 文件。

在文件的顶部，我调用了我的第一个函数。在我的第一个函数中，我在单击按钮时调用了第二个函数。在第二个函数内部，我想回调第一个函数，但在第二个函数“外部”：我的意思是我不希望第一个函数在第二个函数内部运行，因为循环效果......

myFirstFunction();

function myFirstFunction() {

    // some code

    $('myButton').click(function() {
        mySecondFunction();
    }

}

function mySecondFunction() {

    // some code

    $('myOtherButton').click(function() {
        myFirstFunction();
    }

}

我不知道这是否可能，也许我最好使用对象或其他，但我对 Javascript 很陌生...... 提前感谢您的帮助。

【问题讨论】：

您可能希望在每个回调中删除按钮单击事件 $('myButton').off('click') 以便在单击按钮时不会同时调用两者事件...
在其他事件处理程序中绑定事件处理程序几乎总是错误的。你真正想做什么？
这里没有循环。这些函数只是绑定调用其他函数的事件处理程序，它们不直接调用其他函数。
如果您想改变单击按钮时发生的情况，请使用单个事件处理程序。它可以检查并设置一个变量来控制它执行的操作。
@Barmar 我在一个 html 文件中有很多表单，我一次只显示一个。第一个函数显示第一个表单，一旦验证，表单被隐藏并显示第二个表单。调用第一个函数的按钮实际上是一个“上一个”按钮：它隐藏了第二个表单并显示了第一个表单

标签： javascript function loops

【解决方案1】：

您可以在那里使用单个事件处理程序：

var handler = myFirstFunction;

$('myButton').click(function() { handler(); });

function myFirstFunction() { handler = mySecondFunction; }
function mySecondFunction() { handler = myFirstFunction; }

该处理程序将调用您的任一函数。

更新：或者如果这是两个不同的按钮，那么

$('myButton').click( mySecondFunction );
$('myOtherButton').click( myFirstFunction );

【讨论】：

谢谢c-smile，但按钮实际上不一样（对不起，这是我的错，我编辑了我的帖子......）

【解决方案2】：

您说得对，最好避免在彼此之间嵌套函数，因为您提到它可能会变得混乱。我相信其他人可以参与进来，但如果你想坚持使用 vanilla JS，我会创建一个变量，你可以修改它的状态并有一个条件语句来确定要运行的函数。

var state = 1;

function handler(){
    if(state == 1){
        myFirstFunction();
        state = 2;
    }
    else if(state == 2){
        mySecondFunction();
        state = 1;
    }
}

然后让你的 myButton 执行 handler() 函数。

【讨论】：