jQuery 에서 지정 한 요소 가 불 러 올 때 까지 기다 리 기(순수 js 버 전 으로 변경 가능)

모 두 를 오도 하지 않도록 먼저 이 방법의 사용 장 소 를 명 확 히 밝 혀 라.예 를 들 어 블 로그 원 에서 우 리 는 그의 소스 코드 를 수정 할 수 없 으 면 요소 의 등장 을 감시 할 수 밖 에 없다.그래서 다음 방법 은 원본 코드 를 수정 할 수 없 는 상황 에서 사용 하 는 것 이지 자신의 항목 을 쓰 는 것 이 아니다.오늘 블 로그 의 몇 가지 스타일 을 바 꿀 때 자 연 스 럽 게 js 를 더 하면 실현 할 수 있 을 것 이 라 고 생각 했 습 니 다.그것 은 ajax 가 불 러 온 데이터 이지 페이지 가 처음으로 불 러 온 것 이 아 닙 니 다.예 를 들 어 아래 의'댓 글 제출'버튼,오른쪽 검색 버튼 등 입 니 다.저 는 자 연 스 럽 게 썼 습 니 다

 
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"); //     

.그런데 페이지 를 새로 고 친 후에 좀 틀 렸 습 니 다.network 를 보고 ajax 가 왔 다 는 것 을 알 게 되 었 습 니 다.어 쩔 수 없 이 제 가 모델 을 쓰 는 것 을 제외 하고 코드 를 수정 할 방법 을 생각 할 수 밖 에 없 었 습 니 다.그럼 다음은 내 가 생각 한 원소 출현 을 기다 리 는 방법 이다.jQuery 기반 이지 만 코드 가 간결 하여 순수 js 버 전 으로 수정 할 수 있 습 니 다.

 
jQuery.fn.wait = function (func, times, interval) { 
var _times = times || -1, //100  
_interval = interval || 20, //20     
_self = this, 
_selector = this.selector, //    
_iIntervalID; //   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); 
} 
return this; 
} 

사용 방법 도 물론 간단 하고 세 개의 매개 변수 만 있다.func 는 리 셋 함수 입 니 다.지정 한 요소 가 나타 나 면 실행 되 는 함수 입 니 다.times 는 검 측 횟수 입 니 다.기본 값 은-1 입 니 다.나타 날 때 까지 검 측 합 니 다.interval 은 검 측 간격 입 니 다.기본 값 은 20 밀리초 에 한 번 입 니 다.우리 가 이전의 코드

 
$("#btn_comment_submit").wait(function() { //  #btn_comment_submit      
this.removeClass("comment_btn").addClass("btn"); //     
//    this    $("#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 의 체인 구 조 를 파괴 하지 않 습 니 다.당신 은 여전히$("\#id").wait(function(){}).hide()를 사용 할 수 있 습 니 다.그러나 나중에 생각해 보 니 요소 가 로드 되 지 않 았 고 계속 체인 을 연결 하 는 것 도 의미 가 없 었 다.그러나 됐어,고치 지 않 을 거 야.이렇게 하 자.하하:-)마지막 으로 말씀 드 리 겠 습 니 다.저 는 경험 이 얕 습 니 다.만약 에 거기에 잘못 썼 다 면 협객 여러분 께 서 지적 해 주 십시오.