时间戳

首页 > 解决方案 > 如何在 vanilla javascript 中实现承诺以等待转换完成？

javascript - 如何在 vanilla javascript 中实现承诺以等待转换完成？

问题描述

我在遍历项目列表并通过 vanilla javascript 淡入和淡出它们时遇到困难。假设我有一个字符串列表 [“cat”、“ball”、“bat”、“mouse”]。

我想遍历这些项目并一一显示。例如，首先我需要显示“cat”，然后继续显示“bat”。为了做到这一点，我必须先等到“cat”淡入，等它淡出，然后再显示“bat”。目前，我只是使用一个 for 循环，循环直接到列表“鼠标”的末尾，而不是等待其他元素完成淡入淡出。

为了解决这个问题，我知道我需要使用异步编程、回调、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);
}

标签： javascriptasynchronouscallbackpromisesetinterval

解决方案

利用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>

推荐阅读