jQuery에서 지정된 요소가 로드되기를 기다리는 구현(순수한 js 버전으로 변경 가능)_jquery

모든 사람을 오해하지 않도록 먼저 이 방법의 사용 시나리오를 설명하겠습니다.
예를 들어 블로그 파크에서는 소스 코드를 수정할 수 없습니다.
그러면 요소의 모양을 모니터링하는 방법만 찾을 수 있습니다.
그래서 직접 프로젝트를 작성하는 것보다는 소스코드를 수정할 수 없는 경우에는 다음과 같은 방법을 사용합니다. 예를 들어 아래의 '댓글 제출' 버튼, 오른쪽의 검색 버튼 등이 있습니다.
자연스럽게 썼습니다

코드 복사 코드는 다음과 같습니다 1 $("#btn_comment_submit").removeClass("comment_btn").addClass("btn"); //제출 버튼

2 $(".div_my_zzk").addClass("input-append"); // 검색창

3 $(".btn_my_zzk").removeClass("btn_my_zzk").addClass("btn"); //검색 버튼



새로 고침 후 페이지에서 뭔가 문제가 있다는 것을 발견했습니다. 아니, 네트워크를 살펴보니 ajax에서 오는 것임을 발견했습니다.

템플릿을 직접 작성하는 것 외에는 수정하는 방법밖에 찾을 수 없었습니다. 나 자신을 코딩합니다.

그럼 요소가 나타날 때까지 기다리면서 제가 생각한 방법은 다음과 같습니다.
jQuery 기반이지만 코드가 매우 간결하고 순수 js 버전으로 수정이 가능합니다.

코드 복사 코드는 다음과 같습니다. jQuery.fn.wait = function (func , times, 간격) {

var _times = times || -1, //100회

_interval = 간격 || 20, //매회 20밀리초
_self = this,
_selector = this.selector, //Selector
_iIntervalID; //Timer id
if( this.length ){ //얻었다면
func && func.call( this) ;
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //0이면 종료
clearInterval(_iIntervalID);
}
_times < ;= 0 || _times--; //양수인 경우--

_self = $(_selector) //
를 다시 선택합니다. if( _self.length ) { / /얻을지 결정
func && func.call(_self);
clearInterval(_iIntervalID)
}
}, _interval)
}
>}


사용법은 물론 매개변수 3개만으로 매우 간단합니다.
func는 콜백 함수로, 지정된 요소가 나타날 때 실행되는 함수입니다.
times는 감지 횟수이며 기본값은 -1이며 나타날 때까지 감지됩니다.

interval은 감지 간격이며 기본값은 20밀리초입니다.

이전 코드를 수정해보자




코드 복사

코드는 다음과 같다 $("#btn_comment_submit").wait(function() { //#btn_comment_submit 요소가 로드될 때까지 대기this.removeClass("comment_btn").addClass("btn"); //제출 버튼

// 여기는 $("#btn_comment_submit")

})

$("#widget_my_zzk").wait(function() { //#widget_my_zzk 요소를 기다리는 중입니다. 로드됨
$( ".div_my_zzk").addClass("input-append"); //검색 상자
$(".btn_my_zzk").removeClass("btn_my_zzk").addClass("btn" ); //검색 버튼
});


아주 간단하지 않나요?

물론 여전히 jQuery의 체인 구조를 파괴하지는 않습니다. still $("#id").wait(function (){}).hide();

그런데 생각해 보니 요소가 로드되지 않아서 체인을 계속할 의미가 없었지만 잊어버렸습니다. 그건 바꾸지 않을 테니 그대로 두자. ㅎㅎ :-)

마지막으로 제가 경험이 거의 없어서 혹시 잘못된 내용이 있으면 조언 부탁드립니다.