[英]Passing arguments to named function jshint warning
I have to use external/named functions for hover, like this: 我必须使用外部/命名函数进行悬停,如下所示:
function onMouseIn(e){
// Do stuff
}
function onMouseOut(e){
// Do stuff
}
for (var btn_index = 0; btn_index < 3; btn_index++) {
btn.hover(onMouseIn,onMouseOut)
}
However i also need to pass arguments to the functions, so i figured out i'd use unnamed functions for mouseIn and mouseOut events and call my named functions onMouseIn and onMouseOut repectively with the arguments i want. 但是我还需要将参数传递给函数,因此我发现我将对mouseIn和mouseOut事件使用未命名的函数,并分别使用所需的参数调用命名函数onMouseIn和onMouseOut。 I also want to pass the event and the jquery object. 我也想传递事件和jquery对象。 So my code becomes something like this 所以我的代码变成这样
function onMouseIn(e,btn){
// Do stuff using arg
}
function onMouseOut(e,btn){
// Do stuff using arg
}
for (var btn_index = 0; btn_index < 3; btn_index++) {
btn.hover(
function(e) {onMouseIn(e,$(this))},
function(e) {onMouseOut(e,$(this))})
}
But then jshint give me this warning 但是然后jshint给我这个警告
Don't make functions within a loop. 不要在循环内创建函数。
So are there any other ways to pass arguments to named functions? 那么还有其他方法可以将参数传递给命名函数吗? If not then how can i make jshint to hide the warning? 如果没有,我如何使jshint隐藏警告?
The warning is suggesting to try preparing the functions outside of the loop, if possible, so they can be reused throughout the loop: 警告建议尽可能尝试在循环外部准备函数,以便可以在循环中重用它们:
// ...onMouseIn & onMouseOut...
function onHoverStart() {
onMouseIn("arg");
}
function onHoverStop() {
onMouseOut("arg");
}
for (var btn_index = 0; btn_index < 3; btn_index++) {
btn.hover(onHoverStart, onHoverStop);
}
When using function
expressions within the loop (at least, when closures aren't needed), each iteration creates 2 new Function
objects, with each pair a duplicate of the first. 在循环中使用function
表达式时(至少在不需要闭包时),每次迭代都会创建2个新的Function
对象,每对对象都是第一个对象的副本。 JSHint flags it as potentially wasteful. JSHint将其标记为潜在浪费。
Based on your comment, if one of the argument you need to provide is the iterator, btn_index
, you can do that by modifying onHoverStart
and onHoverStop
to be called and used as closures for each event. 根据您的评论,如果您需要提供的参数之一是迭代器btn_index
,则可以通过修改onHoverStart
和onHoverStop
来实现,以将其调用并用作每个事件的闭包。
// ...onMouseIn & onMouseOut...
function onHoverStart(index) { // closure for index
return function (event) { // enclosed event handler
onMouseIn("arg", index, event); // revise the argument order here as needed
};
}
function onHoverStop(index) {
return function (event) {
onMouseOut("arg", index, event);
};
}
for (var btn_index = 0; btn_index < 3; btn_index++) {
btn.hover(onHoverStart(btn_index), onHoverStop(btn_index));
}
(For more details on closures, see " How do JavaScript closures work? " and " JavaScript closure inside loops – simple practical example ") (有关闭包的更多详细信息,请参阅“ JavaScript闭包如何工作? ”和“ 循环内的JavaScript闭包-简单的实际示例 ”)
You can use bind here 您可以在此处使用绑定
change the code to the following 将代码更改为以下内容
function onMouseIn(arg){
// Do stuff using arg
}
function onMouseOut(arg){
// Do stuff using arg
}
for (var btn_index = 0; btn_index < 3; btn_index++) {
btn.hover(onMouseIn.bind(null,"arg"),onMouseOut.bind(null,"arg"));
}
Hope it helps 希望能帮助到你
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.