이미 입력 한 경우 타자기 함수 사용 안 함

Question

타자기 효과를 에뮬레이트하는 jQuery 함수가 있습니다. .mouseup() 처리기 함수에서 호출되었습니다.

지금 사용자가 타자기 효과가 배가 정말 빨리 .mouseup() 2 회를 ​​해제하면이 같은 종류의 일 "ttyyppeewwrriitteerr eeffffeecctt".

타이핑 도중 마우스 조작이 완료되면 알 수 있습니다. (http://jsfiddle.net/MARm2/1/)

//Typewriter Effect 
$.fn.Typewriter = function(opts){ 
    var $this = this, 
     defaults = { animDelay: 50 }, 
     settings = $.extend(defaults, opts); 
    $.each(settings.text, function(i, letter){ 
     setTimeout(function(){ 
      $this.html($this.html() + (letter!='\n'?letter:'<br />')); 
     }, settings.animDelay * i); 
    }); 
} 

여기 .mouseup() 핸들러 함수입니다 :

여기 내 jQuery를 기능입니다 사전에

$('#game_howto').mouseup(function(e) { 
    $('#game_howto_slide1').Typewriter({ 
     animDelay: 50, 
     text: 'Typewriter effect' 
    }); 
}); 

감사합니다!

Answer 1

를 사용합니다. 수정 된 코드 :

$.fn.Typewriter = function(opts){ 
    var $this = this, 
     defaults = { animDelay: 50 }, 
     settings = $.extend(defaults, opts); 

    $this.data('typing', true); // we are typing! 

    $.each(settings.text, function(i, letter){ 
     setTimeout(function(){ 
      $this.html($this.html() + (letter!='\n'?letter:'<br />')); 

      if (i == settings.text.length - 1) { 
       $this.data('typing', null); // this is the last letter, we are done typing! 
      } 
     }, settings.animDelay * i); 
    }); 
} 

$('#game_howto').mouseup(function(e) { 
    if (!$('#game_howto_slide1').data('typing')) { // only run if not typing 
     $('#game_howto_slide1').Typewriter({ 
      animDelay: 50, 
      text: 'Typewriter effect' 
     }); 
    } 
}); 

Answer 2

당신은 당신이 입력하는 동안 데이터 속성을 가진 요소를 표시하고 작업을 완료 할 때 표시를 취소 할 수 있습니다 바쁜 플래그를

var Typewriter = (function(){ 
    var busy=false; 
    return function(opts){ 
     if(busy){ 
      ...  // nothing 
     } 
     else{ 
      busy = true; 
      ...  // something 
      busy = false 
     } 

    } 
})();