Javascript 我怎样才能更好地编码它，使我的代码不'；你看起来没那么业余吗？

此代码接受8个div，并根据分配的div时间值在屏幕上进行比赛。我怎样才能更好地编码，使我的代码看起来不那么业余

我知道我应该在for循环中使用硬编码8以外的其他内容，但timeArray.length不可用，因为我正在使用splice从阵列中删除项目

$(document).ready(function() {
var timeArray = new Array(3,4,5,6,7,8,9,10);
var shortestTime = timeArray[7];
var fastestPony = {};
var index;

var pony = {
    name: "pony",
    raceTime: -1,
    selected: ""
};

//change the color of the pony when the user clicks on it
$('.pony').bind('click', function() {
    $('.pony').removeClass('selectedPony');
    $(this).addClass('selectedPony');

    //get the pony that the user selected
    pony.selected = $(this);
});

$('#startButton').click(function() { 
    if (pony.selected == "") {
        alert("Please click the pony you think will win the race.");
    }
    else {
        for (i = 1; i <= 8; i++) {
        //get a random number from the timeArray
            index = Math.floor(Math.random() * timeArray.length);
            pony.raceTime = timeArray[index];

            //pull the random race time number out of the array 
            //so it can't be assigned to another horse
            timeArray.splice(index, 1);

            //get the fastest pony
            if (pony.raceTime < shortestTime) {
                shortestTime = pony.raceTime;
                fastestPony = $('#pony' + i);
            }

            //award the winner after the ponies have reached the finish line
            if (i == 8) {
                fastestPony.addClass('winner').append(' - Winner!');
            }

            //send the horses on their way to race!
            $('#pony' + i).animate({left: '320px'}, pony.raceTime * 1000);
        }
    }
});

//reset the ponies back to the starting line by reloading the page
$('#resetButton').click(function() {
    document.location.reload(true);
});
});

$（文档）.ready（函数（）{
var timeArray=新数组（3,4,5,6,7,8,9,10）；
var shortestTime=timeArray[7]；
var fastestPony={}；
var指数；
变量小马={
名称：“小马”，
比赛时间：-1，
选定：“”
};
//当用户单击小马时，更改其颜色
$（'.pony'）.bind（'click'，function（）{
$（'.pony'）.removeClass（'selectedPony'）；
$（this.addClass（'selectedPony'）；
//获取用户选择的小马
pony.selected=$（此项）；
});
$（“#开始按钮”）。单击（函数（）{
如果（选择的小马==“”）{
警惕（“请点击你认为会赢得比赛的小马。”）；
}
否则{
对于（i=1；i这确实是一个偏好和挑剔的问题，但是既然你问了

我听说，
on（…）
方法在大多数圈子里都是首选的：

$('.pony').on('click', function() {

及

当然，这取决于您使用的jQuery版本，可能是完全主观的。
这更适合
var timeArray=[3,4,5,6,7,8,9,10]；
不要使用小马这个词？在代码审阅堆栈交换上问这个问题。我不知道代码审阅。我会在那里发布它。不要使用
.bind（）<代码> >太长了，读不下去了，（从中理解为什么）-TL；DR <代码>。（）<代码>替换了所有来自jQuery 1.7……（）的侦听器的其他方法，这不仅仅是一个偏好，对于在10000个元素中添加10000个事件绑定的场景，它有巨大的性能增益。你只需要在容器中添加1个事件绑定，所有10000个元素仍然会对你想要的事件做出反应。我完全同意。我想我在回答中也提到了这个偏好。根据OPs问题的上下文，我发现更多的业余爱好者使用
。bind
或
。单击
，而不是
。
@shanabu“你的答案一点也不清楚。特别是最后一句话让人很难告诉你，它有巨大的性能提升。@PeeHaa我不确定我是否同意这一点。我根本不谈论性能。我使用的术语是“完全主观的”-
$('#startButton').on('click', function() {