2011-08-17 2 views
0

일부 jQuery 코드를 사용하여 페이지의 내용이 분할되어 (탭 블록의 상단에서 탐색 가능) 탭을 만들 때 "다음 "또는"이전 "(각 탭의 콘텐츠 하단에 위치) 링크를 클릭 :jQuery에서 setTimeout을 사용하여 함수를 정렬하는 데 문제가 있음

  1. 페이지가 탭 블록의 상단 (성공적으로 사용하여 구현까지 스크롤"750ms
  2. 을 통해 .scrollTo "플러그인)
  3. 일단 스크롤하면 탭이 해당 "이전"또는 "다음"탭 (해시 태그 URL로 식별)으로 변경됩니다. - 250ms 후.

다음 코드를 사용 :

$(".external_link").click(function() { 
$.scrollTo(515, 750, {easing:'easeInOutQuad'}); 
setTimeout(changeTab($(this).attr("href")), 1000); 
return false; 
}); 

두 미주리에서 동시에 일어난다. 누군가 내가 잘못하고있는 것에 대해 밝힐 수 있다면 정말 감사 할 것입니다. 전체에서

코드 :

$(document).ready(function() { 

$(".tab_content").hide(); 
$("ul.content_tabs li:first").addClass("active").show(); 
$(".tab_content:first").show(); 

$('.content_tabs li').each(function(i) { 
var thisId = $(this).find("a").attr("href"); 
thisId = thisId.substring(1,thisId.length) + '_top'; 
$(this).attr("id",thisId); 
}); 

function changeTab(activeTab) { 

$("ul.content_tabs li").removeClass("active"); 
$(activeTab + '_top').addClass("active"); 

$(".tab_content").hide(); 
$(activeTab).fadeIn(); 

} 

//check to see if a tab is called onload 
if (location.hash!=""){changeTab(location.hash);} 
//if you call the page and want to show a tab other than the first, for instance  index.html#tab4 

$("ul.content_tabs li").click(function() { 
if ($(this).hasClass("active")) 
return false; 

changeTab($(this).find("a").attr("href")); 
return false; 
}); 


$(".external_link").click(function() { 
$.scrollTo(515, 750, {easing:'easeInOutQuad'}); 
setTimeout(changeTab($(this).attr("href")), 1000); 
return false; 
}); 
}); 

난 지금의 setTimeout이 작업을 수행하려고 시도하는 건가요? 내 지식은 엄청나게 제한되어 있습니다.

답변

1
setTimeout(changeTab($(this).attr("href")), 1000); 

그건 잘못된 것입니다. 함수를 실행해야하는 결과가 아니라 250ms가 더 적합합니다. changeTab은 함수이며, changeTab (인수)는 함수를 실행 중입니다. 그래서

var that = $(this); 
setTimeout(function() {changeTab(that.attr("href"))}, 250); 

난 당신이 제한 시간을 설정할 때 직접 changeTab-함수를 호출하고, 이전 기능이 전에 그 750ms를 대기 때문에 동시에 실행할 이유가 생각하려고합니다.

+0

Perfect! 정말 고맙습니다! :) –

1

에서 setTimeout()으로 전화를 겁니다. 함수 참조을 전달해야합니다. 호출은 즉시 실행되지만 시간 초과가 만료되면 함수 참조가 실행됩니다. 이 같은 setTimeout() 전화 :

setTimeout(function() { changeTab($(this).attr("href")); }, 1000); 

또한, 당신은 스크롤이 완료 될 때 호출되는 함수를 나타내는 .scrollTo() pluginonAfter 옵션을 활용하는 것이 좋습니다. 이동에 더 많은 의미가 있습니다.

$.scrollTo(515, 750, { 
    easing: 'easeInOutQuad', 
    onAfter: function() { 
     setTimeout(function() { changeTab($(this).attr("href")); }, 250); 
    } 
}); 
+0

많은 설명에 감사드립니다! –

관련 문제