停止jQuery打字机动画onclick

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声明 - 我们可以重复使用全局变量打勾。

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