점진적 변경을위한 Javascript 함수

Question

나는이 tutorial을 사용하여 주어진 기간 동안 변경을 구현하기위한 기본 javascript 함수를 작성했습니다.

function fadetext(){ 
if(hex>0) { 
hex-=11; 
document.getElementById("sample").style.color="rgb("+hex+","+hex+","+hex+")"; 
setTimeout("fadetext()",20); 
} 
else 
hex=255 
} 

질문 1 :function를 통해 변수를 입력하는 방법; 예 : fadetext(element, time). 단순히 값을 변수로 바꾸는 것만으로는 그럴 수 없었습니다.

질문 2 : 점차적으로 자바 스크립트로 변경을 구현하는 표준 (및 오른쪽) 방법입니까? 나 혼란스러운 점은 우리가 fadetext() 함수를 자체 함수 안에 사용한다는 것이다. 과부하가되지 않습니까?

Answer 1

당신은 setTimeout에, 함수가 아닌 문자열을 전달해야합니다

function fadeText(element, duration) { 
    ... 
    setTimeout(function() { 
     fadeText(element, duration); 
    }, 20); 
} 

이 코드는 폐쇄 원래 매개 변수를 캡처 익명 함수를 전달합니다.

Answer 2

예, 함수 외부 fadetext()에 대한 타이머를 설정하고 전역 변수로 외부 hex을 정의, 그래서 당신은 두 문제를 해결 :) 과의 setTimeout 때마다 호출 피하기 위해 setInterval()를 사용하고, 대신 함수를 호출해야합니다 끈. (한 사용자가 지적했듯이 내 코드에는 재사용 문제가 있습니다.) 보너스로

var hex = 255; 
setInterval(fadetext,20); 

function fadetext(){ 
    if(hex>0) { 
    hex-=11; 
    document.getElementById("sample").style.color="rgb("+hex+","+hex+","+hex+")"; 
    } 
} 

---

, 당신은 jQuery를을 조사 할 수 페이딩 (및 기타 애니메이션 작업)는 종종 하나의 명령 또는 명령 줄에서 구현하기 정말 간단됩니다.