使用 setTimeout 和 jQuery 排序函数时出现问题

Question

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

1. 页面向上滚动到选项卡块的顶部（使用“.scrollTo”插件成功实现）超过750毫秒
2. 一旦滚动，选项卡就会更改为相应的“上一个”或“下一个”选项卡（由主题标签 URL 标识）- 250 毫秒后。

使用以下代码：

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

两者在 mo 处同时发生。如果有人能够阐明我做错了什么，我将非常感激。

完整代码：

$(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(argument) 正在执行一个函数。所以尝试一下

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

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

Answer 2

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

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

另外，您应该考虑利用 onAfter 选项/10/jqueryscrollto.html" rel="nofollow">.scrollTo() 插件 表示滚动完成时要调用的函数。去可能更有意义：

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