文字和擦除效果的文本动画计时问题

Question

我创建了在JS中键入和擦除文本动画效果的函数。但是，我陷入了如何在类型函数完全执行后调用擦除函数的问题？我试过setTimeout似乎不起作用。感谢帮助！

var clength = 0;var caption = 'MyName';var x = 1;var y = x/2;

$(document).ready(function() {
setInterval('cursorAnimation()', 600);
ding = $('#caption');
type();
});
function type() {
ding.html(caption.substr(0, clength++));
if (clength < caption.length + 1) {
setTimeout('type()', 180);
} else {
clength = 0;
caption = '';
}
}
function erase() {
ding.html(caption.substr(0, clength--));
if (clength >= 0) {
setTimeout('erase()', 50);
} else {
clength = 0;
caption = '';
}
}
function cursorAnimation() {
$('#cursor').animate({
opacity: 0
}, 'fast', 'swing').animate({
opacity: 1
}, 'fast', 'swing');
}

Answer 1

嗯，有不同的方法可以做到这一点。

首先，我必须说你使用setTimeout的方式不是最好的。通过将字符串表达式放入其中，可以使JS引擎通过eval解析表达式。一个缓慢而简单危险的事情，必须尽可能躲避;除非它真的需要。

在这种情况下，您可以简单地将函数作为setTimeout的参数传递，它也可以工作。所以，setTimeout(type, 180).

现在，据我了解，您的代码type()和erase()都是递归函数，它们要么调用自己，要么在到达末尾后完成执行。"到达终点后完成执行"正是您需要的代码分支，因此您只需在此处调用擦除即可。

} else {
clength = 0;
caption = '';
erase();
}

现在，也许您想保存type()函数启动的可能性，而无需最终强制调用erase()。在您的情况下，我会将其封装在闭包中，如下所示：

function type(callback) {
return function(){
ding.html(caption.substr(0, clength++));
if (clength < caption.length + 1) {
setTimeout('type()', 180);
} else {
clength = 0;
caption = '';
if (callback != undefined) callback();
}
}
}

在这种情况下，您的type函数成为第一类函数，即生成其他函数的函数。当你用type(erase)调用它时，它会callback写为erase，并返回一个函数，其变量范围包含callback，因此它可以调用它，因为它是它自己的局部变量。

如果您调用type()它会创建一个未定义callback函数，因此在这种情况下不会发生任何事情。

编辑：

function type(callback) {
return function(){
ding.html(caption.substr(0, clength++));
if (clength < caption.length + 1) {
setTimeout(type(callback), 180);
} else {
if (callback != undefined) callback();
}
}
}

Answer 2

这是一个仅限 CSS 的解决方案：

.caption {
display: inline-block;
box-sizing: content-box;
white-space: nowrap;
overflow: hidden;
font-family: monospace;
border-right: 1px solid;
animation-name: typing, cursor;
animation-duration: 5s, 1s;
animation-iteration-count: infinite;
animation-timing-function: steps(23, end), linear;
}
@keyframes typing {
0% {
width: 0;
}

20% {
width: 0;
}

60% {
width: 165px;
}

80% {
width: 165px;
}

100% {
width: 0;
}
}
@keyframes cursor {
from {
border-right: 1px solid;
}

to {
border-right: 1px transparent;
}
}

<span class="caption">My name is Hritik Gupta</span>