Javascript 尝试设置超时以显示和隐藏球

我试着写一个程序来练习我的js技能。有3个球，它们一开始是隐藏的。我希望球1先出现，1秒钟后，球1消失。接下来，球2出现，1秒后消失；同样的逻辑也适用于ball_3。当我运行代码时，前两个球不会隐藏。我不确定出了什么问题。下面的代码是我编写的html、css和js代码。希望有人能帮我。先谢谢你

$（文档）.ready（函数（）{
变量注释=['ball_1'、'ball_2'、'ball_3']；
对于（i=notes.length；i>0；i--）{
var note=notes.shift（）；
$（'#'+注）.addClass（'显示'）；
setTimeout（函数（）{
$（'#'+注意）.removeClass（'显示'）；
}, 1000);
}
});
#ball_1{
宽度：10px；
高度：10px；
背景：#000000；
边框：2个实心#ccc；
边界半径：50%；
}
#球2{
宽度：10px；
高度：10px；
背景：#0000FF；
边框：2个实心#ccc；
边界半径：50%；
}
#球3{
宽度：10px；
高度：10px；
背景#7FFF00；
边框：2个实心#ccc；
边界半径：50%；
}
#球1，
#球2，
#球3{
宽度：10px；
高度：10px；
边框：2个实心#ccc；
边界半径：50%；
}
.未显示{
显示：无；
}
.显示{
显示：块；
}
通常，在使用for循环进行迭代时，不要修改数组。shift方法将从数组中删除第一项，从而修改其长度。而是这样做：

$(document).ready(function() {
  var notes = ['ball_1','ball_2','ball_3'];
  var i; // You were declaring "i" in global namespace before.  Don't do that.
  for(i = 0; i < notes.length; i++){
    var note = notes[i];
    $('#' + note).addClass('shown');
      setTimeout(function() {
        $('#' + note).removeClass('shown');
      },1000);
    }
});

$（文档）.ready（函数（）{
变量注释=['ball_1'、'ball_2'、'ball_3']；
var i；//您以前在全局命名空间中声明过“i”。不要这样做。
对于（i=0；i

您还将从我的注释中看到，您在全局名称空间中定义了“i”。这样做从来都不好，所以如果使用“var”，请始终确保在函数块的开头定义变量

编辑：缺少分号

EDIT2：完全没有注意到我需要改变循环条件。
希望这就是你需要的


$（文档）.ready（函数（）{
变量注释=['ball_1'、'ball_2'、'ball_3']；
对于（i=notes.length；i>0；i--）{
var注释=注释[i]；
$（'#'+注）.addClass（'显示'）；
隐藏球（注，i）
}
});
函数隐藏球（注意）{
setTimeout（函数（）{
$（'#'+注意）.removeClass（'显示'）；
}，1000*i）；
}
#ball_1{
宽度：10px；
高度：10px；
背景：#000000；
边框：2个实心#ccc；
边界半径：50%；
}
#球2{
宽度：10px；
高度：10px；
背景：#0000FF；
边框：2个实心#ccc；
边界半径：50%；
}
#球3{
宽度：10px；
高度：10px；
背景#7FFF00；
边框：2个实心#ccc；
边界半径：50%；
}
#球1，球2，球3{
宽度：10px；
高度：10px；
边框：2个实心#ccc；
边界半径：50%；
}
.未显示{
显示：无；
}
.显示{
显示：块；
}
您正在尝试的将无法工作，因为它将一次性运行for循环，设置3倍超时

试试这样的

jQuery(document).ready(function($) {
function myBallLoop(){
     // increment as needed
     if(typeof note == 'undefined') {
        var note = 1;
     } else if (note == 3){
        break; // end loop
     } else {
        note ++;
     }
        // show current ball qickly
        $('#ball_' + note).show('fast', function(){
            // call back after show event
            // hide current ball after 1 sec
            r = setTimeout(function(){$('#ball_' + note).hide()}, 1000);
            // self call function after 2 seconts
            t = setTimeout(function(){myBallLoop();, 2000}
       });           

     }
   // loop start
   myBallLoop();
});

您正在寻找一个同步的事件播放-首先
ball_1
显示1秒，然后
ball_2
显示1秒，以此类推

像这样的事情是行不通的：

    for( var i = 0; i < notes.length; i++){
        $('#' + notes[i]).addClass('shown');
        setTimeout(function() {
            $('#' + notes[i]).removeClass('shown');
        },1000);
    }

#ball_1{
宽度：10px；
高度：10px；
背景：#000000；
边框：2个实心#ccc；
边界半径：50%；
}
#球2{
宽度：10px；
高度：10px；
背景：#0000FF；
边框：2个实心#ccc；
边界半径：50%；
}
#球3{
宽度：10px；
高度：10px；
背景#7FFF00；
边框：2个实心#ccc；
边界半径：50%；
}
#球1，
#球2，
#球3{
宽度：10px；
高度：10px；
边框：2个实心#ccc；
边界半径：50%；
}
.未显示{
显示：无；
}
.显示{
显示：块；
}
充分利用jquery提供的功能

使用$进行迭代。每个都与ES5的forEach相同。使用delay方法延迟添加类的函数类似于setTimeout


$（文档）.ready（（）=>{
变量注释=['ball_1'、'ball_2'、'ball_3']；
让showBalls=（i，项）=>{
$（'#'+项）。延迟（i*1000）。队列（（）=>{
$（'#'+项）.addClass（'显示'）；
$（'#'+notes[i-1]）.removeClass（'显示'）.clearQueue（）；
});
}
美元。每个（注释，（i，项目）=>{
展示球（一，项目）；
});
});
#ball_1{
宽度：10px；
高度：10px；
背景：#000000；
边框：2个实心#ccc；
边界半径：50%；
}
#球2{
宽度：10px；
高度：10px；
背景：#0000FF；
边框：2个实心#ccc；
边界半径：50%；
}
#球3{
宽度：10px；
高度：10px；
背景#7FFF00；
边框：2个实心#ccc；
边界半径：50%；
}
#球1，球2，球3{
宽度：10px；
高度：10px；
边框：2个实心#ccc；
边界半径：50%；
}
.未显示{
显示：无；
}
.显示{
显示：块；
}

谢谢你。但我想要的是让球显示出来，然后在1秒后消失；然后球2出现并在1秒后消失，等等，非常感谢你帮助我理解“回调”的概念。我以前从没学过。我有一个问题，在“hide”函数中，有一个函数“callback（）“这是JavaScript中的一种内置方法，因为我没有看到你写函数。第二个问题是在同一个地方显示了三个球。有没有办法让Bale1显示在顶部位置，Baly2在中间显示，Baly3在底部就像在HTML中重写的顺序一样？再次非常感谢！”代码>callback（）
与函数的参数
callback
相同，对于其他疑问，可以使用
visibi