Question

在我的javascript书中，我读到创建许多单独的“模块”是一个很好的方法。然而，当我将这个哲学应用于我的第一个jQuery项目时，我的函数被多次调用，没有明显的原因。

我的计划是：

有一个功能可以处理网页上的数字输入（点击）。

有第二个功能（此处也显示）来处理输入验证。

只有在模块2找到有效数字时才有第三个函数（未显示）来处理数字处理。

如果功能2或3中的任何一个号码失败，他们会再次拨打enterNumber()，然后等待用户“点击”新号码。

相反的是，调用enterNumber()似乎是在没有用户做任何事情的情况下“点击”$('#button)。

首先，这是对点击处理程序的合法处理吗？它正在以现在的方式生成太多的循环。

var enterNumber = function () {
        $('#button').click(function(){
            guess = $('#input').val();
            $('#input').val("").focus();
            verifyNumbers(guess);
        });

        $('#input').keyup(function(event){
            if (event.keyCode == 13){
                $('#button').click();
            }
        });
};

var verifyNumbers = function(x) {
    if (isNaN(x))
    {
        $("#display").html("You must type in numbers, not letters or spaces");
        $('#input').val("").focus();
        enterNumber();
    }
    else if (x > 100)
    {
        $("#display").html("You must type in numbers below 100");
        $('#input').val("").focus();
        enterNumber();
    }
    else
    {
        console.log("number is legit");
        //compareNumbers(x);
    }
};

enterNumber();

Answer 1

只需要在页面加载时调用enterNumber的内容。您正在绑定jQuery事件。如果多次调用enterNumber，那么在该事件上有多个处理程序（这会做同样的事情，因此多次调用）。解决方案：

$(document).ready(function() {
    enterNumber();
}

这是什么在页面加载时绑定事件。一旦绑定，你就不应该再绑定它们了。

然后删除其他两个函数中的enterNumber调用，因为处理程序已经在侦听click和keyup事件 - 一旦事件被触发就会调用verifyNumbers。

第一个jquery项目 - 在函数中使用处理程序来模块化它们

1 个答案: