如何在原始javascript中实现Promise以等待转换完成? [英] How to implement promises in vanilla javascript to wait for transitions to complete?

问题描述

我很难遍历项目列表并无法通过普通JavaScript淡入和淡出.假设我有一个字符串列表["cat"，"ball"，"bat"，"mouse"].

I am having difficulty iterating through a list of items and fading them in and out via vanilla javascript. Let's say I have a list of strings ["cat", "ball", "bat", "mouse"].

我想遍历这些项目并逐一显示它们.例如，首先我需要显示"cat"，然后继续显示"bat".为此，我必须首先等待，直到"cat"淡入，等待其淡出，然后显示"bat".当前，我只是在使用for循环，该循环直接进入列表"mouse"的末尾，而不是等待其他元素完成淡入淡出.

I want to loop through these items and display them one by one. For instance, first I need to display "cat" and then proceed to displaying "bat". In order to do this, I must first wait until "cat" is faded in, wait for it fade out, and then display "bat." Currently, I'm just using a for loop, the loop is going straight to the end of the list "mouse" and not waiting for the other elements to finish fading in and out.

要解决此问题，我知道我需要使用异步编程，回调，promise API等，但是我并没有真正使用它们，因此我不知道如何实现此解决方案.非常感谢您对如何与"setInterval()"一起使用异步编程的任何帮助或澄清.

To fix this, I am aware I need to use asynchronous programming, callbacks, promise API, etc, but I haven't really worked too much with these so I don't know how to implement this solution. Any help or clarity on how to use asynchronous programming alongside "setInterval()" is greatly appreciated.

这是我的代码的片段:

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 事件:

Utilizing the transitionend event that @RwwL mentioned in the comments:

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>

这篇关于如何在原始javascript中实现Promise以等待转换完成?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！