选择函数子集作为字符串并评估答案

【问题标题】：Pick subset of functions as string & evaluate选择函数子集作为字符串并评估
【发布时间】：2015-06-19 14:52:47
【问题描述】：

我有一组定义好的 JS 函数。我希望用户使用逗号分隔的字符串选择其中的一个子集。然后我想从他们的子集中随机选择，并评估选择的函数。我有这 99% 的工作，除了由于某种原因它没有进行评估。为什么控制台一直告诉我“未定义不是函数”？

// 1 User picks a subset of function names as a comma seperated string.
var effectSubset = 'func4, func5, func6';


// 2 Available functions
    function func1() {
        $('html').append('func1');
    }

    function func2() {
        $('html').append('func2');
    }

    function func3() {
        $('html').append('func3');
    }

    function func4() {
        $('html').append('func4');
    }

    function func5() {
        $('html').append('func3');
    }

    function func6() {
        $('html').append('func4');
    }


var autoPlay = function () {
    // 3 Get the user's subset of functions, turn into array
    effectArray = effectSubset.split(',');
    // 4 Pick random function from array
    var effect = effectArray[Math.floor(Math.random() * effectArray.length)];
    // 5 run the randomly picked function
    window[effect]();
}

// 6 Re-run every second
var playInterval = setInterval(autoPlay, 1000);

【问题讨论】：

`window[effect]();`你指的是哪个窗口？
在试图解决这个问题时，我看到有人建议将字符串作为函数运行，但我认为它不起作用，因为它在函数内。
您的函数不在此处的窗口对象中。所以你可以这样做 window[func1] = function (){}; window.func1 = 函数 (){};将它们添加到窗口对象并尝试？

标签： javascript jquery arrays string function

【解决方案1】：

我可以看出两件事不对：

您的函数未分配给window
您的 "effect" 变量包含前导空格

我在这里更正了以上几点：http://jsfiddle.net/ftaq8q4m/1/

这似乎已经解决了您描述的问题。

示例：

window.func1 = function() {
    $('html').append('func1');
}

还有：

window[effect.trim()]();

更新

作为奖励，我修复了您的误导性附加消息 =D

http://jsfiddle.net/ftaq8q4m/5/

【讨论】：

快速问题，在完整的应用程序中，我在几个元素上使用了这个函数，实际上是附加到单个元素而不是 html 标记。我设置了一个 'that' 的 var 等于 'this' 来维持 'this' 的范围，但似乎 window 方法搞砸了，对吗？所有的附加都只是进入最后一个元素，而不是现在每个元素。
在分配函数和调用函数时，只要this（或that）的范围对您可用，就可以了。 window 在这两种情况下都自然可用，因此很方便。生病看看小提琴:)
这是我所说的 jsfiddle：jsfiddle.net/ftaq8q4m/6 我可能应该在原始问题中包含此信息，但我试图使其尽可能简化。跨度>
我不确定我是否完全理解了您更广泛目标的细节，但我已经修改了一个小提琴以使用 that 变量而不是窗口。 jsfiddle.net/ftaq8q4m/7
谢谢！这个更新的 jsfiddle 准确地向我展示了我做错了什么。

【解决方案2】：

您的方法不起作用，因为函数名称之间有空格 var effectSubset = 'func4, func5, func6';拆分后变量效果在函数名前有一个空格。

所以被调用的函数是func4、<space>func5、<space>func6，其中有一个不存在的空格。

首先，最好有一个命名空间。

var effectSubset = 'func4,func5,func6'; // <--- remove spaces here or trim like in other answers
window.myNamespace = {};

window.myNamespace.func1 = function() {
    $('html').append('func1');
}
// ..... define other functions like above
window["myNamespace"][effect](); // <-- this should work

这是一个演示http://jsbin.com/lixeto/edit?html,js,output

【讨论】：

【解决方案3】：

有两个问题：首先，拆分输入后有前导空格，其次，JSFiddle 将您的脚本包装在 IIFE 中。第一个问题可以通过使用 ' ,' 拆分或使用修剪函数映射结果数组来解决。第二个问题可以通过创建一个对象来分配功能来解决。有关工作示例，请参阅此 fiddle。

// 1 User picks a subset of function names as a comma seperated string.
var effectSubset = 'func4, func5, func6';


// 2 Available functions
var funcObj = {
    func1: function func1() {
        $('html').append('func1');
    },

    func2: function func2() {
        $('html').append('func2');
    },

    func3: function func3() {
        $('html').append('func3');
    },

    func4: function func4() {
        $('html').append('func4');
    },

    func5: function func5() {
        $('html').append('func3');
    },

    func6: function func6() {
        $('html').append('func4');
    }
};

var autoPlay = function () {
    // 3 Get the user's subset of functions, turn into array
    effectArray = effectSubset.split(',').map(function(func) { return func.trim() });
    // 4 Pick random function from array
    var effect = effectArray[Math.floor(Math.random() * effectArray.length)];
    // 5 run the randomly picked function
    funcObj[effect]();
}

// 6 Re-run every second
var playInterval = setInterval(autoPlay, 1000);

【讨论】：