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]]()会引发如下错误：


  对象没有方法“平滑”


这是因为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()检查更新。