Question

I’m wondering how I might stop the following typewriter script when I – for instance – click a link. I don’t want to do anything fancy, simply stop the animation as soon as the link is clicked.

$(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);
});

Thanks in advance!

@rrfive

Answer 1

Inside your tickInterval function, remove the var declaration from the setTimeout – we can reuse the global tick variable.

Then you just need to have a clearInterval(tick); on your click handler for whichever button you like.