javascript - jQuery .click 命令顺序

Question

这是一个非常简单的问题，我可以很容易地解决它，但由于我正在学习 javascript，所以我非常想知道为什么会出现这个特定问题。

$("#go").click(function() {
    $("p").append(array[x] + " ")
    functionlist[array[x]]()
    x++
})​

这并不像我预期的那样有效。我希望它写入数组的当前内容，执行与某个函数名称关联的简单动画，然后递增 x。一切正常，除了它不会增加 x。

如果我这样做:

$("#go").click(function() {
    $("p").append(array[x] + " ")
    //functionlist[array[x]]()
    x++
})​

x 成功增加。

所以我的问题是，为什么会发生这种情况？

这是我正在使用的 jsfiddle 的链接:http://jsfiddle.net/mxy6N/3/

Answer 1

好吧，如果你检查你的脚本控制台(F12 是大多数浏览器)，你会看到 functionlist[array[x]]() 抛出类似这样的错误:

Object has no method "smooch"

这是因为 array[x] 等于 "smooch"，而 functionlist["smooch"] 是未定义的，所以在它到达之前就出错了你的x++。

此代码中发生的其他事情:

• x 在您的函数内部声明，因此在使用时它始终为 0。
• 即使它是在您的函数之外声明的，当您递增它时，它也会用完您数组中要查看的项目。您需要在此处使用一两个模运算符。
• 您没有引用具有 $.fn.transition 定义的 .js 文件，因此您的转换调用也会出错。
• flip 和 flop 都有相同的 rotateY 值，所以一旦它“翻转”就不会“翻转”

以下内容可能会满足您的需求:http://jsfiddle.net/g5mJd/3/

更新后的代码:

var array = ["smooch", "jab", "flip"];
var move = "flip";
var x = 0;
var functionlist = {
    flip: function() {
        $("#block").transition({
            perspective: '0px',
            rotateY: '180deg'
        }, 1000);
    },
    flop: function() {
        $("#block").transition({
            perspective: '0px',
            rotateY: '0deg'
        }, 100);
    }
};


$("#go").click(function() {
    var functionName = (x % 2 == 0) ? 'flip' : 'flop';
    var fn = functionlist[functionName];
    if($.isFunction(fn)) {
        fn();
    }
    var say = array[x % array.length];
    $('p').append(say + ' ');
    x++;
})​;

编辑:更新了 $.isFunction() 检查。