jQuery each delay and once finished callback

Question

I'm trying to load a function after each span gets class one by one.

$("span.outline").each(function (index) {
 $(this).delay(300 * index).addClass("loaded");
});
$("span.outline").promise().done(function() {
 alert("All Loaded");
});

.outline{
 display: block;
 padding: 10px;
 margin-bottom: 10px;
 color: white;
 background-color: red;
}
.outline.loaded{
 background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="outline">Span Name</span>
<span class="outline">Span Name</span>
<span class="outline">Span Name</span>
<span class="outline">Span Name</span>

The problem is that in the beginning all spans must be red and become blue one by one.

Alert is working correctly. It waits until each delay time is finished.

Please help me to find a solution

• fdomn-m: .delay() only works for jquery animations, not as a general "wait". You could use setTimeout instead.
• Giorgi Khatchapuridze: I used setTimeout and it works for elements but not for alert. Alert jumps immediately
• fdomn-m: Use setTimeout for the alert as well and set the timeout so it matches the sum of the other timeouts. As with .delay, .promise().done waits for jquery animations to complete.
• Giorgi Khatchapuridze: Thank you I will try
• fdomn-m: This might help as an alternative approach: stackoverflow.com/questions/50532916/…