Javascript 使用动态构建的jQuery承诺链顺序激活特定元素

我试图播放声音，并以特定的顺序切换特定元素的类。每个元素都应该添加一个类，播放一个声音，然后删除该类，然后再继续对下一个元素执行相同的操作

下面是一种方法：

var delay = 400;
$('#green').toggleClass('active').delay(delay).promise().done(function () {
  playSound(this[0].id);
  $(this).toggleClass('active');
  $('#red').toggleClass('active').delay(delay).promise().done(function () {
    playSound(this[0].id);
    $(this).toggleClass('active');
    $('#blue').toggleClass('active').delay(delay).promise().done(function () {
      playSound(this[0].id);
      $(this).toggleClass('active');
      $('#yellow').toggleClass('active').delay(delay).promise().done(function () {
        playSound(this[0].id);
        $(this).toggleClass('active');
      });
    });
  });
});

我更喜欢简单地传入一个元素ID数组来动态生成上面的代码。基于这里的许多相关答案，我相信这段代码的方向更正确，但所有东西都同时运行

startAnimation();

function playSound(color) {
  var sound = document.getElementById(color + 'Sound');
  sound.load();
  sound.play();
}

function computerClick(color) {
  playSound(color);
  $('#' + color).toggleClass('active').delay(500).promise().done(function () {
    $('#' + color).toggleClass('active');
  });
}

function startAnimation() {
  var colors = ['green', 'red', 'blue', 'yellow'];
  var p = $.when(1);
  var results = [];
  colors.forEach(function(color) {
    p = p.then(function() {
      return computerClick(color);        
    });
  });
}

---

这里有人能告诉我我做错了什么，或者我是否需要一种完全不同的方法吗？

您可以利用

.queue（）

顺序链接jQuery承诺。注意，在jsfiddle的

js

处，绿色的

被作为参数传递给
playSound（）
，尽管绿色的
没有定义

在
音频
元素的
前面添加了
.load（）
return
语句从
computerClick（）返回jQuery承诺对象


$（函数（）{
startAnimation（）；
功能播放声音（彩色）{
var-sound=document.getElementById（颜色+声音）；
sound.load（）；sound.play（）；
}
功能计算机单击（颜色）{
播放声音（颜色）；
返回$（'#'+颜色）。切换类（'active'）。延迟（500，“#fx”）
.dequeue（“\u fx”）
.promise（“\u fx”）.done（函数（）{
$（'#'+color）.toggleClass（'active'）；
});
}
函数startAnimation（）{
变量颜色=['绿色'、'红色'、'蓝色'、'黄色']；
var结果=[]；
$（{}）.queue（“_fx”，$.map（颜色，函数（el）{
返回函数（下一步）{
计算机单击（el）。然后单击（下一步）
} 
})).dequeue（“\u fx”）
}
播放声音（“绿色”）；
})
.color按钮{
宽度：200px；
高度：200px；
显示：内联块；
}
.主动{
不透明度：1！重要；
}
#蓝色的{
背景颜色：蓝色；
不透明度：.6；
}
#黄色的{
背景颜色：黄色；
不透明度：.6；
}
#绿色的{
背景颜色：绿色；
不透明度：.6；
}
#红色的{
背景色：红色；
不透明度：.6；
}
您可以使用
.queue（）
顺序调用函数数组。在问题的
js
中，jQuery承诺对象似乎没有从
computerClick（）
返回？感谢您的
.queue（）
指导。期待今天的大量阅读。你的代码正是我希望实现的。它工作得很好。谢谢