Последовательно активируйте определенные элементы с динамически построенной цепочкой обещаний jQuery

Question

Я пытаюсь воспроизвести звук и переключить класс определенных элементов в определенном порядке. Каждый элемент должен иметь добавленный класс, воспроизводить звук, а затем удалять класс, прежде чем продолжать делать то же самое в следующем элементе.

Ниже один из способов сделать это:

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'); 
     }); 
    }); 
    }); 
}); 

Я бы предпочел, чтобы просто передать массив идентификаторов элементов для генерации выше код динамически. Основываясь на многих связанных с этим ответах, я считаю, что этот код больше в правильном направлении, но все работает сразу.

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);   
    }); 
    }); 
} 

JS Fiddle

Может кто-то здесь сказать мне, что я делаю неправильно, или если мне нужен совершенно другой подход?

Answer 1

Вы можете использовать .queue() для последовательной передачи обещаний jQuery. Обратите внимание, что в js в jsfiddle green был передан как параметр playSound(), хотя green не указан?

.load() до .play()audio элемент; return заявление вернуть JQuery объект обещание от computerClick()

$(function() { 
 
startAnimation(); 
 

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

 
function computerClick(color) { 
 
    playSound(color); 
 
\t return $('#' + color).toggleClass('active').delay(500, "_fx") 
 
      .dequeue("_fx") 
 
      .promise("_fx").done(function() { 
 
      $('#' + color).toggleClass('active'); 
 
      }); 
 
} 
 

 
function startAnimation() { 
 
    var colors = ['green', 'red', 'blue', 'yellow']; 
 
    var results = []; 
 
    $({}).queue("_fx", $.map(colors, function(el) { 
 
    return function(next) { 
 
     computerClick(el).then(next)  
 
    } 
 
    })).dequeue("_fx") 
 
} 
 

 
playSound("green"); 
 
})

.color-button { 
 
    width: 200px; 
 
    height: 200px; 
 
    display: inline-block; 
 
} 
 

 
.active { 
 
    opacity: 1!important; 
 
} 
 

 
#blue { 
 
    background-color: blue; 
 
    opacity: .6; 
 
} 
 

 
#yellow { 
 
    background-color: yellow; 
 
    opacity: .6; 
 
} 
 

 
#green { 
 
    background-color: green; 
 
    opacity: .6; 
 
} 
 

 
#red { 
 
    background-color: red; 
 
    opacity: .6; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="color-button" id="green"></div> 
 
<div class="color-button" id="red"></div> 
 
<div class="color-button" id="yellow"></div> 
 
<div class="color-button" id="blue"></div> 
 

 
<audio id="greenSound" preload="auto" src="#" type="audio/wav"></audio> 
 
<audio id="redSound" preload="auto" src="#" type="audio/wav"></audio> 
 
<audio id="yellowSound" preload="auto" src="#" type="audio/wav"></audio> 
 
<audio id="blueSound" preload="auto" src="#" type="audio/wav"></audio>

jsfiddle https://jsfiddle.net/xnr3xpv5/2/