jQuery将功能指针插入事件听众

Question

使用jQuery，我想动态生成一个侦听器和每个侦听器要执行的操作。

问题在于，在func[i]下方的动态选择函数的指针永远不会被其代表的内容所取代（在这种情况下，在func数组中存储的任何功能）。似乎很明显，这是因为JS不会进入function(){...}，直到聆听click发生为止。

我不确定如何解决问题，任何想法都将不胜感激。以下是一些示例代码，如果您喜欢的话，这里是JSFIDDLE。非常感谢！

// an array of functions to call and a random number to choose which one to call
var func = ["Alf();","Sarah();","Jon();"];
var i = Math.floor( Math.random() * 3 );
// the dynamically generated listener
$('#foo').on('click', function() {
  func[i];//pointer to function
});
// a function to be called
function Alf () {
    alert("Hi! I'm Alf");
}

Answer 1

您需要将数组更改为功能引用而不是字符串：

var func = [Alf, Sarah, Jon];

，然后将其执行更改为：

// the dynamically generated listener
$('#foo').on('click', function() {
  func[i]();//pointer to function
});

，并且您需要确保您的变量i保留其值，直到实际发生事件，并且i是用于使用的危险变量名称。

---

我建议这样做：

(function() {
    // an array of functions to call and a random number to choose which one to call
    var funcArray = [Alf, Sarah, Jon];
    var randomFunc = funcArray[Math.floor( Math.random() * func.length )];
    // the dynamically generated listener
    $('#foo').on('click', function() {
      randomFunc();   //pointer to function
    });
    // a function to be called
    function Alf () {
        alert("Hi! I'm Alf");
    }
})();

更改：

1. 将整个东西放在iife中，以便您的变量受到保护，而不是全局
2. 获取实际的随机函数，而不仅仅是索引
3. 使用func.length代替3来维护性。
4. 为随机函数变量使用更好的名称
5. 将功能更改为功能引用而不是字符串。
6. 将parens添加到randomFunc()的末端以实际执行函数

---

如果您想将其制作到允许您在多个位置使用逻辑的函数，则可以执行类似的操作：

function bindRandomClickFunc(selector, fnArray) {
     var fn = fnArray[Math.floor( Math.random() * fnArray.length )];
     $(selector).on('click', fn);
}

Answer 2

问题的一部分是，当您调用func[i]时，您只是在调用字符串。而不是使func成为字符串数组，而是考虑使其成为功能引用的数组，然后使用()

调用您的功能

// a function to be called
function Alf () {
    alert("Hi! I'm Alf");
}
function Sarah () {
    alert("Hi! I'm Sarah");
}
function Jon () {
    alert("Hi! I'm Jon");
}
// an array of functions to call and a random number to choose which one to call
var func = [Alf, Sarah, Jon];
var i = Math.floor( Math.random() * 3 );
// the dynamically generated listener
$('#foo').on('click', function() {
  func[i](); //pointer to function
});

jsfiddle：http：//jsfiddle.net/tuanderful/8f5fz/1/

Answer 3

使用此

 
$('#foo').on('click', function()
 {
   var i = Math.floor( Math.random() * 3 );
    eval(func[i]);//pointer to function
});