Как реализовать обещания в ванильном javascript, чтобы дождаться завершения переходов?
У меня возникают трудности с повторением списка элементов и их исчезновением с помощью ванильного javascript. Допустим, у меня есть список строк ["кошка", "мяч", "летучая мышь", "мышь"].
Я хочу перебирать эти элементы и отображать их один за другим. Например, сначала мне нужно отобразить «кошку», а затем перейти к отображению «летучая мышь». Чтобы сделать это, я должен сначала дождаться появления «кошки», дождаться, пока она исчезнет, а затем отобразить «летучая мышь». В настоящее время я просто использую цикл for, цикл идет прямо к концу списка «мышь» и не ждет, пока другие элементы закончат исчезать и исчезать.
Чтобы исправить это, я знаю, что мне нужно использовать асинхронное программирование, обратные вызовы, обещания API и т. д., но я не слишком много работал с ними, поэтому я не знаю, как реализовать это решение. Любая помощь или ясность в том, как использовать асинхронное программирование вместе с "setInterval()", очень ценятся.
Вот фрагмент моего кода:
var textarr = ["cat", "ball", "bat", "mouse"]
for(let i=0; i<textarr.length; i++){
var text_item = document.getElementById('text_item');
text_item.style.opacity = 0;
text_item.innerHTML = textarr[i];
// problem lies here; this is skipping to end of the list (mouse)
fadeIn(text_item);
}
//function borrowed from stack overflow to fadeIn elements
function fadeIn(element) {
var op = 0.1; // initial opacity
element.style.display = 'block';
var timer = setInterval(function () {
if (op >= 1){
clearInterval(timer);
}
element.style.opacity = op;
element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op += op * 0.1;
}, 100);
}
Начните без обещаний. Используйте только setTimeout (или обработчик событий перехода, в зависимости от того, как закодирована анимация) и обратные вызовы. Используйте рекурсивный подход для просмотра списка. Как только вы освоите эти основы, изучите промисы.
Это зависит от того, как вы делаете переход.
Вместо промисов вы можете сделать это с помощью простых обработчиков событий завершения перехода. developer.mozilla.org/en-US/docs/Web/Events/transitionend
Приношу извинения за отсутствие фрагментов кода - я отредактировал вопрос, чтобы включить их. Спасибо!
Вам было бы лучше с очередью, а анимацию можно было бы сделать с помощью CSS без JavaScript.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Используя событие transitionend, которое @RwwL упомянул в комментариях:
let display = document.getElementById('display');
const animals = ['dog', 'cat', 'mouse'];
let i = 0;
display.addEventListener('transitionend', function(event) {
if (i < animals.length) {
if (!display.classList.contains('fadeIn')) {
display.innerHTML = animals[i++];
}
display.classList.toggle('fadeIn');
}
}, false);
// Set timeout, otherwise the transition won't take effect (there are ways around this)
setTimeout(() => {
display.classList.toggle('fadeIn');
}, 1000);#display {
color: #FFFFFF;
transition: color 1s ease-in;
}
#display.fadeIn {
color: #000000;
}<div id = "display">Animal Names Here</div>Большое спасибо, это то, что я искал :)
Лучший способ - использовать очередь, в которой таймер выбирает элемент из списка, а затем выполняет действие. В этом случае я закодировал его с помощью переходов CSS, чтобы сделать простое затухание.
// Made it a function so you could use
// it more than once on same page
function changeText (arr, elem, startIndex) {
// holds active slide
let current = startIndex || 0
// Called when we what to show the current word
const update = function () {
// set the word on the page
elem.innerHTML = arr[current]
// Add the class to start transition
elem.classList.add('fadeIn')
// How long you want the word to stay on the screen
// When timer executes it calls function to reverse
// the annimation
window.setTimeout(next, 3000) // 3 seconds
}
// Called to do the reverse animation and update the step
const next = function () {
// remove the class so goes back to zero
elem.classList.remove('fadeIn')
// update what slide we are on
current++
// If we are over the limit, than restart
if (current===arr.length) {
current = 0 // back to first slide
}
// How long do you want for the fade out transition to
// take to execute.
window.setTimeout(update, 300); // 300 milliseconds
}
// initialize it so first word shows up
update();
}
var textarr = ["cat", "ball", "bat", "mouse"]
changeText(textarr, document.querySelector('.text1'))
changeText(textarr, document.querySelector('.text2'), 3).text {
opacity: 0;
transition: opacity .3s ease-in-out;
}
.fadeIn {
opacity: 1;
transition: opacity 2s ease-in-out;
}<h1>One</h1>
<div class = "text text1"></div>
<h2>Another one</h2>
<div class = "text text2"></div>
Пожалуйста, разместите соответствующие фрагменты кода в своем вопросе.