我目前正试图在使用setInterval((函数的帮助下从数组中淡入和淡出文本。我的init((函数在数组中循环，并调用FadeInThenFadeOut((函数为数组中的每个对象应用淡入淡出动画；然而，在调试时，我注意到当调用setInterval((时，我的程序会迭代到数组中的下一个对象，并跳过代码来应用淡入淡出动画。
我的理解是，setInterval((将应用淡入动画的回调延迟了50毫秒(毫秒(，所以我认为这会导致代码跳过。有人能帮我找到一种方法，让我的FadeInThenFadeOut((函数在迭代到数组中的下一个对象之前完成吗
let quotes = [
{
"id": 1,
"text": "text1",
"author": "author1"
},
{
"id": 2,
"text": "text2",
"author": "author2"
},
{
"id": 3,
"text": "text3",
"author": "author3"
}
];
const quotePlacement = document.createElement('div');
quotePlacement.classList.add('text-example');
function init() {
for(let quoteIndex = 0; quoteIndex < quotes.length; quoteIndex++){
AssignAndAppendElement(quotes[quoteIndex].text, quotes[quoteIndex].author);
FadeInThenFadeOut();
// now wait for FadeInThenFadeOut() to finish
// then iterate to the next quoteindex
}
}
let elementOpacity = 0;
const callBackTimeInterval = 50;
function FadeInThenFadeOut() {
const timerId = setInterval(function() {
IncreaseOpacity();
if(elementOpacity >= 1){
clearInterval(timerId);
SetElementVisibility(true);
FadeOut();
ResetQuotePlacement();
}
quotePlacement.style.opacity = elementOpacity;
}, callBackTimeInterval);
}
function FadeOut() {
const timerId = setInterval(function() {
DecreaseOpacity();
if(elementOpacity <= 0){
clearInterval(timerId);
SetElementVisibility(false);
}
quotePlacement.style.opacity = elementOpacity;
}, callBackTimeInterval);
}
function DecreaseOpacity() {
elementOpacity -= 0.025;
}
function IncreaseOpacity(){
elementOpacity += 0.025;
}
function SetElementVisibility(visibility) {
if(visibility){
quotePlacement.style.opacity = 1;
elementOpacity = 1;
return;
}
elementOpacity = 0;
}
function AssignAndAppendElement(quoteText, author) {
quotePlacement.innerHTML = "<h1> <q>" + quoteText + "</q> - " + author + "</h1>";
quotePlacement.style.opacity = 0;
document.body.appendChild(quotePlacement);
}
function ResetQuotePlacement() {
quotePlacement.innerHTML = "";
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script defer src="main.js"></script>
<!-- <link rel="stylesheet" href="../bootstrap.css"> -->
<title>Inspirational Quotes</title>
</head>
<body onload="init()">
</body>
</html>我发现了这个问题。你在错误的时间调用重置功能
function FadeInThenFadeOut() {
const timerId = setInterval(function() {
IncreaseOpacity();
if(elementOpacity >= 1){
clearInterval(timerId);
SetElementVisibility(true);
FadeOut();
ResetQuotePlacement(); // <---------------- this line
}
quotePlacement.style.opacity = elementOpacity;
}, callBackTimeInterval);
}
如果我把它移到FadeOut功能，它可以正常工作
此外，要等待每个淡入淡出动画结束，您可以简单地声明一个函数showNextQuote，并在FadeOut函数结束时调用它。
这是工作代码：
let quotes = [{
"id": 1,
"text": "text1",
"author": "author1"
},
{
"id": 2,
"text": "text2",
"author": "author2"
},
{
"id": 3,
"text": "text3",
"author": "author3"
}
];
const quotePlacement = document.createElement('div');
quotePlacement.classList.add('text-example');
function init() {
showNextQuote();
}
let quoteIndex = 0;
function showNextQuote() {
if (quoteIndex >= quotes.length) return; //alternatively, set it back to 0 to keep looping
ResetQuotePlacement();
AssignAndAppendElement(quotes[quoteIndex].text, quotes[quoteIndex].author);
quoteIndex++;
FadeInThenFadeOut();
}
let elementOpacity = 0;
const callBackTimeInterval = 50;
function FadeInThenFadeOut() {
const timerId = setInterval(function() {
IncreaseOpacity();
if (elementOpacity >= 1) {
clearInterval(timerId);
SetElementVisibility(true);
FadeOut();
}
quotePlacement.style.opacity = elementOpacity;
}, callBackTimeInterval);
}
function FadeOut() {
const timerId = setInterval(function() {
DecreaseOpacity();
if (elementOpacity <= 0) {
clearInterval(timerId);
SetElementVisibility(false);
showNextQuote();
}
quotePlacement.style.opacity = elementOpacity;
}, callBackTimeInterval);
}
function DecreaseOpacity() {
elementOpacity -= 0.025;
}
function IncreaseOpacity() {
elementOpacity += 0.025;
}
function SetElementVisibility(visibility) {
if (visibility) {
quotePlacement.style.opacity = 1;
elementOpacity = 1;
return;
}
elementOpacity = 0;
}
function AssignAndAppendElement(quoteText, author) {
quotePlacement.innerHTML = "<h1> <q>" + quoteText + "</q> - " + author + "</h1>";
quotePlacement.style.opacity = 0;
document.body.appendChild(quotePlacement);
}
function ResetQuotePlacement() {
quotePlacement.innerHTML = "";
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script defer src="main.js"></script>
<!-- <link rel="stylesheet" href="../bootstrap.css"> -->
<title>Inspirational Quotes</title>
</head>
<body onload="init()">
</body>
</html>或者，您可以使用css转换属性。这让事情变得简单多了。这里有一个快速的例子：
const quotes = ["Quote 1", "Quote 2", "Quote 3"];
const el = document.getElementById("holder");
el.style.opacity = 0;
let currentIndex = 0;
let currentShown = false;
const intervalID = setInterval(() => {
if (currentIndex >= quotes.length) {
clearInterval(intervalID);
return;
}
if (!currentShown) {
el.style.opacity = 1;
el.innerText = quotes[currentIndex];
currentShown = true;
} else {
el.style.opacity = 0;
currentShown = false;
currentIndex++;
}
}, 2000);#holder {
transition: opacity 1.9s;
}<h1 id="holder"></h1>css方法，带有animationend事件且不使用setInterval((
我使用标准的html方法对带auth的引号进行引用。
一旦动画结束事件发生，就在下一个元素上重新启动循环
const DomParser = new DOMParser()
const quotes =
[ { id: 1, text: 'text1', author: 'author1' }
, { id: 2, text: 'text2', author: 'author2' }
, { id: 3, text: 'text3', author: 'author3' }
]
const quotePlacement = document.createElement('div')
quotePlacement.index = -1
function newQuote(txt,auth)
{
let elm = `<blockquote>
<p>${txt}</p>
<footer>${auth}</footer>
</blockquote>`
return DomParser.parseFromString( elm, 'text/html').body.firstChild
}
function nextQuoteLoop()
{
quotePlacement.index = ++quotePlacement.index % quotes.length
let { text, author } = quotes[quotePlacement.index]
if (quotePlacement.firstChild)
{ quotePlacement.firstChild.remove() }
quotePlacement.appendChild( newQuote(text,author ))
quotePlacement.firstChild.classList.add('fade-in-out')
}
// main
document.body.appendChild(quotePlacement)
quotePlacement.onanimationend = nextQuoteLoop
nextQuoteLoop() // start the first one....fade-in-out { animation: fadeInOut ease 7s; }
@keyframes fadeInOut {
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
/* classic blockquote */
blockquote {
padding: 6px 16px;
border: none;
quotes: "201C2009" "2009201D";
display: block;
float: right;
opacity:0;
}
blockquote p {
font-size: 36px;
padding: 0 16px 0 0;
text-indent: -12px;
color: #251487;
font-style: italic;
margin-bottom: 0.3em;
}
blockquote p:before {
content: open-quote;
font-weight: bold;
font-size: 40px;
line-height: 32px;
}
blockquote p:after {
content: close-quote;
font-weight: bold;
font-size: 40px;
line-height: 32px;
}
blockquote footer {
text-align: right;
padding-right: .7em;
font-style: oblique;
color: #2d0068;
}