Оптимизация jQuery для вкладок

Question

Я нахожусь в процессе разработки виджета.Виджет имеет три вкладки, которые реализованы следующим образом.

<div id="widget">
    <ul id="tabs">
        <li><a href="http...">One</a></li>
        <li><a href="http...">Two</a></li>
        <li><a href="http...">Three</a></li>
    </ul>

    <div id="tab_container">
        <div id="tab_content">
            //Tab Content goes here...
        </div>
    </div>
</div>

// The active class is initialized when the document loads 
$("#tabs li a").click(function()
{
$("#tabs li.active").removeClass("active");
    $("#tab_content").load($(this).attr('href'));
    $(this).parent().addClass("active");

    return false;   
});

У меня проблема в том, что написанный код jquery очень медленный.Если пользователь быстро меняет вкладки, виджет перестает работать.Это приводит к тому, что вкладки не совпадают с отображаемыми данными и имеют общую задержку.Я считаю, что это потому, что вкладка изменяется до завершения $ .load ().Я попытался реализовать следующее:

("#tabs li a").click(function()
{
$("#tabs li.active").removeClass("active");
    $("#tab_content").load($(this).attr('href'), function (){
        $(this).parent().addClass("active");
    });

    return false;   
});

Насколько я понимаю, функция обратного вызова в функции загрузки не выполняется, пока функция загрузки не будет завершена.Я думаю, что это решило бы мою проблему, однако я не могу найти способ выбрать правильную вкладку, которая была нажата в функции обратного вызова.Если это не способ сделать это, то каков наилучший способ реализовать эти вкладки, чтобы они перестали загружать старый запрос и загружали выбор самой новой вкладки пользователем?

Answer 1

Почему бы просто не использовать плагин jQuery UI Tabs ?

Answer 2

Независимо от того, должны ли вы использовать вкладки пользовательского интерфейса jQuery или нет, именно так ваш код может работать

$("#tabs li a").click(function(e)
{
    var fn = function(a) {
        return function() {
            $(a).parent().addClass("active");
        };
    }
    $("#tabs li.active").removeClass("active");
    $("#tab_content").load($(this).attr('href'), fn(this));

    return false;
});