Question

我知道之前已经提出并回答了类似的问题，但事实是我只是想知道在阅读之后我还需要做些什么。

以下代码来自教程。它显示一些带打字机效果的文本。一切正常。

我添加了一个_，它在文本前面移动，就像dos光标一样。

我正在尝试在打字机动画完成后使_闪烁。

我知道（或者我应该说“思考”）我需要一个回调来触发makeBlink（）但是我不能在我的生活中弄清楚在哪里使用它。

有人可以帮帮我吗？

var char = 0;
var caption = "";

function showCaption(obj) {
    caption = obj.attr('title');
    if(caption)
        type();
}


function type() {
    $('#caption').html(caption.substr(0, char++));
    if(char < caption.length+1)
        setTimeout("type()", 150);
    else {
        char = 0;
        caption = "";
    }
}

function makeBlink(){
    $("#cursor").html('<blink>_</blink>');
}


$(window).load(function() {
    showCaption($("#caption_span"));
    makeBlink(); // This runs whilst the text is still typing :(
});

Answer 1

从您拥有的地方移除makeBlink();并将其插入此处：

function type() {
    $('#caption').html(caption.substr(0, char++));
    if(char < caption.length+1)
        setTimeout("type()", 150);
    else {
        char = 0;
        caption = "";
        makeBlink();
    }
}

PS。 HTML <blink>元素非常陈旧，不太受支持。甚至不支持text-decoration: blink。最好使用类似于type()函数的javascript解决方案。类似的东西：

function makeBlink(){
    var $cur = $('#cursor');
    if($cur.html())
        $cur.html('');
    else
        $cur.html('_');
    setTimeout(makeBlink, 500);
}

或使用css display或visibility。

此外，您应该在代码中将"type()"更改为type，以避免使用eval。（永远不要将字符串传递给setTimeout）你的教程教你一个不好的做法。

Answer 2

您可以在type（）函数的else分支中调用makeBlink。

function type() {
    $('#caption').html(caption.substr(0, char++));
    if(char < caption.length+1)
        setTimeout("type()", 150);
    else {
        char = 0;
        caption = "";
        makeBlink();
    }
}

当您完成设置计时器并完成输入后，这将执行makeBlink()功能。正如您之前所做的那样，当您还在执行计时器并且仍在进行更多打字时，您的makeBlink()函数会被调用。

功能1完成时运行功能2

2 个答案: