Question

我想知道如何在我 - 例如 - 点击链接时停止以下打字机脚本。我不想做任何花哨的事情，只要点击链接就立即停止动画。

$(function () {
var ch = 0;
var item = 0;
var items = $('.headline_origin li').length;
var time = 1000;
var delay = 40;
var wait = 6000;
var tagOpen = false;

function tickInterval() {
    if(item < items) {
        var text = $('.headline_origin li:eq('+item+')').html();
        type(text);
        text = null;
        var tick = setTimeout(tickInterval, time);
    } else {
        clearTimeout(tick);
    }
}

function type(text) {
    time = delay;
    ch++;
    if(text.substr((ch - 1), 1) == '<') {
        if(text.substr(ch, 1) == '/') {
            tagOpen = false;
        }
        var tag = '';
        while(text.substr((ch - 1), 1) != '>') {
            tag += text.substr((ch - 1), 1);
            ch++;
        }
        ch++;
        tag += '>';
        var html = /\<[a-z]+/i.exec(tag);
        if(html !== null) {
            html = html[0].replace('<', '</') + '>';
            tagOpen = html;
        }
    }
    if(tagOpen !== false) {
        var t = text.substr(0, ch);
    } else {
        var t = text.substr(0, ch);
    }

    $('h1 span.origin').html(t);
    if(ch > text.length) {
        item++;
        ch = 0;
        time = wait;
    }
}

var tick = setTimeout(tickInterval, time);
});

提前致谢！

@rrfive

Answer 1

在tickInterval函数中，从setTimeout中删除var声明 - 我们可以重用全局tick变量。

然后你需要在你的点击处理程序上有一个clearInterval(tick);，无论你喜欢哪个按钮。

停止jQuery Typewriter动画onclick

1 个答案: