텍스트 필드 카운터가 느림

Question

저는 Twitter 카운터와 비슷한 효과를 내기 위해 JQuery 라이브러리에서 사용할 문자 카운터를 만들었습니다. 그러나, 나는 적어도 파이어 폭스 (FireFox)가 그것을 처리하는 데 시간이 걸린다는 것을 알아 차렸다. (다른 브라우저는 약간의 변형을 보이지만, 나쁘지는 않다.) 기본적으로 꾸준한 속도로 타이핑을하는 동안, '따라 잡기'를 시작하고 따라 잡을 때까지 브라우저가 응답하지 않게됩니다. 트위터의 텍스트 상자에서 동일한 타이핑 속도를 시도 할 때 전혀 느려지지 않습니다!

이 상자를 감시하는 자동 크기 조정 플러그인이 있지만이 코드 만 느려짐을 유발하는 많은 제거 및 변경을 시도했습니다. 따라서 브라우저가 특정 시간에 처리하기에는 너무 많은 수학 일 수 있다고 생각할 수는 있지만 실제로 이것이 얼마나 간단한 지에 대한 문제가 없는지 실제로 볼 수 없으며 솔루션을 생각할 수도 없습니다.

/* Post Saying text count */ 
var postSayingLimit = 450; 
$('span.counter').text(postSayingLimit); 
$('#post-saying').bind('keyup keypress', function() { 
    var postSayingUsed = $(this).val().length; 
    if(postSayingUsed >= postSayingLimit - postSayingLimit/10) { 
    $(this).parent().find('span.counter').addClass('counter-limit'); 
    } else { 
    $(this).parent().find('span.counter').removeClass('counter-limit'); 
    } 
    var postSayingCount = postSayingLimit - postSayingUsed; 
    $(this).parent().find('span.counter').text(postSayingCount); 
}); 

내가 조건을 제거하는 바인딩 하나에 가고, 그것은 단지 그것을 지연의 계속과 심지어 하드 값을 삽입하는 시도했습니다. 어쩌면 바인드 함수에서 일부 변수를 이동 시켰습니까? 실제 카운터 프로세스를 함수로 만들기?

Answer 1

내가 여기 예를 들어 만든 : http://jsfiddle.net/zpjc6/

나를 위해 빠른 작동을 (크롬 그래도). 또한 변수에 스팬을 저장하여 사소한 개선을했습니다. 이렇게하는 것이 좋은 연습 인 동안 그 비싸지 않아야한다. 하지만 도움이 될지도 모릅니다.

편집 : 아마도 당신은 실제 사이트를 링크 할 수 있습니까?

Answer 2

가능한 한 많은 요소를 찾으려면 필요한 경우 클래스 제거 만 실행하면됩니다. (그것은 비록 필요의 여부를 여부를 결정하는 효율적인 방법을 파악하기 전에, 그냥 반복 검색과 멀리하려고 노력 가치가있다.)