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

미리 감사드립니다.

당신의 tickInterval 기능 내부

Answer 1

@rrfive의에서는 setTimeout에서 var 선언을 제거 - 우리는 글로벌 틱 변수를 다시 사용할 수 있습니다.

그런 다음 원하는 버튼에 대해 클릭 핸들러에 clearInterval(tick);이 있어야합니다.