第一个jquery项目-在函数中使用处理程序来模块化它们
first jquery project - using handlers in functions to modularize them
在我的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();
enterNumber的内容只需要在页面加载时调用。您正在绑定jQuery事件。如果您多次调用enterNumber,那么该事件将有多个处理程序(执行相同的操作,因此会进行多次调用)。解决方案:
$(document).ready(function() {
enterNumber();
}
它在页面加载时绑定事件。一旦它们被绑定,就不应该再绑定它们。
然后删除其他两个函数中的enterNumber调用,因为处理程序已经在侦听click和keyup事件——一旦事件触发,就会调用verifyNumbers
相关文章:
- keyup事件处理程序更改焦点不适用于快速键入
- Webpack/Rect:遵循egghead.io教程,但出现错误:您可能需要一个合适的加载程序来处理此文件类型
- 提示使用服务器端事件处理程序激活JavaScript
- 将事件处理程序绑定到任何可能的事件
- 正在将事件处理程序添加到不存在的类
- 在AJAX回调和呈现PIXIJS之间处理程序流时遇到了问题
- Adobe Edge:动画完成时添加onComplete处理程序
- 是否可以从输入处理程序中确定输入的类型
- 在MVVM视图模型中处理应用程序范围的元素
- 在循环中附加事件处理程序时出现浏览器性能问题
- 在同一个javascript事件处理程序中调用不同的函数
- 有没有一种方法可以让内联事件处理程序在元素创建后立即执行
- 检查事件处理程序参数
- 实现延迟的jquery更改事件处理程序
- 如何使用Python/Selenium网络驱动程序处理Angularjs/Javascript下拉列表
- 在 AJAX 完成之前,不要让其他处理程序处理
- 如何使用硒铬驱动程序处理地理位置弹出窗口
- 如何使用硒网络驱动程序处理 onblur 事件
- 是否有一种方法为chrome打包应用程序处理Http BasicAuthentication
- Ajax加载程序处理问题