Проблемы с упорядочением функций с помощью setTimeout с jQuery - PullRequest
Новая
       19

Проблемы с упорядочением функций с помощью setTimeout с jQuery

0 голосов
/ 18 августа 2011

Я использую некоторый код jQuery для создания вкладок, в которых содержимое страницы разбито (доступно для навигации из верхней части блока вкладок), и я собираюсь сделать следующее при переходе по ссылке «следующий» или «предыдущий» ( размещается в нижней части содержимого каждой вкладки):

  1. Страница для прокрутки вверх до верхней части блока вкладок (успешно реализована с помощью плагина ".scrollTo") в течение 750 мс
  2. После прокрутки вкладка для перехода к соответствующей вкладке «предыдущая» или «следующая» (идентифицируется по URL-адресу хэштега) - спустя 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? Мои знания невероятно ограничены.

Ответы [ 2 ]

1 голос
/ 18 августа 2011

Вы передаете функцию вызову на setTimeout(). Вам необходимо передать функцию reference . Вызов будет выполнен немедленно, но ссылка на функцию будет выполнена, когда истечет время ожидания. Звоните setTimeout() так: 

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

Кроме того, вы должны рассмотреть возможность использования опции onAfter плагина .scrollTo() , который указывает на функцию, вызываемую при завершении прокрутки. Это может иметь больше смысла, чтобы пойти: 

$.scrollTo(515, 750, {
    easing: 'easeInOutQuad',
    onAfter: function () {
        setTimeout(function() { changeTab($(this).attr("href")); }, 250);
    }
});
1 голос
/ 18 августа 2011 
setTimeout(changeTab($(this).attr("href")), 1000);

Это неправильно, вы должны вставить функцию, а не результат выполнения функции, и 250 мсек имеют больше смысла. changeTab - это функция, changeTab (аргумент) выполняет функцию. Так что попробуйте 

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

Я думаю, причина, по которой они выполняются одновременно, в том, что вы вызываете функцию changeTab напрямую, когда вы устанавливаете тайм-аут, а предыдущая функция ждет 750 мс, прежде чем продолжить.

...