我的电传动画第一次迭代后如何停止? [英] How can I stop this teletype animation after its first iteration?
问题描述
我正在使用jquery进行打字效果,发现了这段代码并对其进行了编辑,以根据需要完美地工作.
I am doing a typewriting effect using jquery and found this code and edited it to work perfectly as i need.
但是,我有一个问题,我无法停止循环.
But, i have a problem that i am not able to stop the loop.
我试图检测是否打印了最后一段,所以我可以在此之后添加一个函数,但是没有运气.
I tried to detect that the last paragraph is printed so i can add a function after that with no luck.
您的建议和提示会受到赞赏.
Your advices and hints are appreciated.
代码是:
(function ($) {
function typeString($target, str, cursor, delay, cb) {
$target.html(function (_, html) {
return html + str[cursor];
});
if (cursor < str.length - 1) {
setTimeout(function () {
typeString($target, str, cursor + 1, delay, cb);
}, delay);
}
else {
cb();
}
}
function deleteString($target, delay, cb) {
var length;
$target.html(function (_, html) {
length = html.length;
return html.substr(0, length - 1);
});
if (length > 1) {
setTimeout(function () {
deleteString($target, delay, cb);
}, delay);
}
else {
cb();
}
}
// jQuery hook
$.fn.extend({
teletype: function (opts) {
var settings = $.extend({}, $.teletype.defaults, opts);
return $(this).each(function () {
(function loop($tar, idx) {
// type
typeString($tar, settings.text[idx], 0, settings.delay, function () {
// delete
setTimeout(function () {
deleteString($tar, settings.delay, function () {
loop($tar, (idx + 1) % settings.text.length);
});
}, settings.pause);
});
}($(this), 0));
});
}
});
// plugin defaults
$.extend({
teletype: {
defaults: {
delay: 100,
pause: 5000,
text: []
}
}
});
}(jQuery));
$('#target').teletype({
text: [
'Lorem ipsum dolor sit amet, consetetur sadipscing elitr,',
'sed diam nonumy eirmod tempor invidunt ut labore et dolore',
'magna aliquyam erat, sed diam voluptua. At vero eos et'
]
});
$('#cursor').teletype({
text: ['_', ' '],
delay: 0,
pause: 500
});
推荐答案
您需要从setTimeout()
获取处理程序,并使用该处理程序运行clearTimeout()
.
You need to get handler from setTimeout()
and run clearTimeout()
with the handler.
var handler = setTimeout(function () {
typeString($target, str, cursor + 1, delay, cb);
}, delay);
....
clearTimeout(handler);
我修改了您的代码,以说明应该在哪里放置停止例程.
I modified your code to explain where you should put a stop routine.
检查此链接: http://jsbin.com/enukit/1
您需要多清理一些逻辑.光标应分开或由选项设置,因为您要停止循环(该循环用于使光标闪烁).
You need to clean your logic little more. Cursor should be separated or set by option, because you meant to stop the loop, which is used to blink cursor.
(function ($) {
// writes the string
//
// @param jQuery $target
// @param String str
// @param Numeric cursor
// @param Numeric delay
// @param Function cb
// @return void
var handler1, mycount=0, handler2, handler3;
function typeString($target, str, cursor, delay, cb) {
$target.html(function (_, html) {
return html + str[cursor];
});
//alert('cursor:'+cursor);
//alert('str.length:'+str);
if (cursor < str.length - 1) {
handler1 = setTimeout(function () {
typeString($target, str, cursor + 1, delay, cb);
}, delay);
}
else {
cb();
}
}
// clears the string
//
// @param jQuery $target
// @param Numeric delay
// @param Function cb
// @return void
function deleteString($target, delay, cb) {
var length;
$target.html(function (_, html) {
length = html.length;
return html.substr(0, length - 1);
});
if (length > 1) {
handler2 = setTimeout(function () {
deleteString($target, delay, cb);
}, delay);
}
else {
cb();
}
}
// jQuery hook
$.fn.extend({
teletype: function (opts) {
var settings = $.extend({}, $.teletype.defaults, opts);
$(this).each(function () {
mycount=0;
(function loop($tar, idx) {
mycount ++;
// type
typeString($tar, settings.text[idx], 0, settings.delay, function () {
// delete
clearTimeout(handler1);
handler3 = setTimeout(function () {
deleteString($tar, settings.delay, function () {
if (mycount<settings.text.length) {
loop($tar, (idx + 1));} else {
clearTimeout(handler3);
alert('The end!');
}
});
}, settings.pause);
});
}($(this), 0));
});
}
});
// plugin defaults
$.extend({
teletype: {
defaults: {
delay: 100,
pause: 5000,
text: []
}
}
});
}(jQuery));
$('#target').teletype({
text: [
'Lorem ipsum dolor sit amet, consetetur sadipscing elitr,',
'sed diam nonumy eirmod tempor invidunt ut labore et dolore',
'magna aliquyam erat, sed diam voluptua. At vero eos et'
]
});
/*
$('#cursor').teletype({
text: ['_', ' '],
delay: 0,
pause: 500
});
*/
这篇关于我的电传动画第一次迭代后如何停止?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!