![](/img/trans.png)
[英]How to wait for promises to complete within the onchange event using JavaScript?
[英]How to implement promises in vanilla javascript to wait for transitions to complete?
我在遍歷項目列表並通過香草javascript淡入和淡出時遇到困難。 假設我有一個字符串列表[“ cat”,“ ball”,“ bat”,“ mouse”]。
我想遍歷這些項目並逐一顯示它們。 例如,首先我需要顯示“ cat”,然后繼續顯示“ bat”。 為此,我必須首先等待,直到“ cat”淡入,等待它淡出,然后顯示“ bat”。 當前,我只使用一個for循環,該循環直接進入列表“ mouse”的末尾,而不等待其他元素完成淡入淡出。
為了解決這個問題,我知道我需要使用異步編程,回調,promise 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);
}
利用@RwwL在注釋中提到的transitionend
事件:
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.