Question

我正在使用一些jQuery代码来创建选项卡，其中页面的内容被分解为（从选项卡块的顶部可导航）并且我希望在“下一个”或“上一个”链接时执行以下操作（单击放置在每个选项卡内容的底部）：

向上滚动到标签栏顶部的页面（使用“.scrollTo”插件成功实施）超过750毫秒
滚动后，标签会更改为相应的“上一个”或“下一个”标签（由标签网址标识） - 250毫秒后。

使用以下代码：

$(".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执行此操作？我的知识非常有限。

Answer 1

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

这是错误的，你必须放入一个函数，而不是执行函数的结果，250毫秒更有意义。 changeTab是一个函数，changeTab（参数）正在执行一个函数。所以试试

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

我认为它们同时执行的原因是因为你在设置超时时直接调用changeTab函数，而前一个函数在执行之前等待750ms。

Answer 2

您正在将函数调用传递给setTimeout()。您需要传递函数参考。调用将立即执行，但超时到期时将执行函数引用。像这样致电setTimeout()：

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

此外，您应该考虑利用.scrollTo() plugin的onAfter选项，该选项指示滚动完成时要调用的函数。走路可能更有意义：

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

使用带有jQuery的setTimeout的问题排序函数

2 个答案: