将参数传递给命名函数 jshint 警告

Question

我必须使用 external/named 悬停函数，如下所示：

     function onMouseIn(e){
      // Do stuff
     }

     function onMouseOut(e){
      // Do stuff
     }

     for (var btn_index = 0; btn_index < 3; btn_index++) {
       btn.hover(onMouseIn,onMouseOut)
     }

但是我还需要将参数传递给函数，所以我发现我会为 mouseIn 和 mouseOut 事件使用未命名的函数，并使用我想要的参数分别调用我的命名函数 onMouseIn 和 onMouseOut。我还想传递事件和 jquery 对象。所以我的代码变成了这样

 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))})
 }

但是 jshint 给我这个警告

Don't make functions within a loop.

那么还有其他方法可以将参数传递给命名函数吗？如果不是那么我怎样才能让 jshint 隐藏警告？

Answer 1

你可以在这里使用绑定

将代码更改为以下内容

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"));
 }

希望对您有所帮助

Answer 2

警告建议尽可能在循环外准备函数，这样它们就可以在整个循环中重复使用：

// ...onMouseIn & onMouseOut...

function onHoverStart() {
  onMouseIn("arg");
}

function onHoverStop() {
  onMouseOut("arg");
}

for (var btn_index = 0; btn_index < 3; btn_index++) {
  btn.hover(onHoverStart, onHoverStop);
}

在循环中使用 function 表达式时（至少，当不需要闭包时），每次迭代都会创建 2 个新的 Function 对象，每一对都是第一个的副本。 JSHint 将其标记为潜在浪费。

根据您的评论，如果您需要提供的参数之一是迭代器 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));
}

（有关闭包的更多详细信息，请参阅“How do JavaScript closures work?" and "JavaScript closure inside loops – simple practical example”）

将参数传递给命名函数 jshint 警告

Passing arguments to named function jshint warning

javascript

jquery

jshint