Как два переключаются между несколькими div, когда содержимое div должно обновляться каждые 5 секунд?

Question

У меня есть представление с 2 (или более) кнопками и делениями.После нажатия кнопки 1 частичное представление должно загружаться в «DivPartialView_1» и обновляться каждые 5 секунд.Когда пользователь нажимает кнопку 2, «DivPartialView_1» должен скрываться, а другое частичное содержимое просмотра должно загружаться в «DivPartialView_2», а также обновляться каждые 5 секунд.Моя проблема в том, что оба div-ов видны после нажатия кнопки 2, потому что первое обновление контента (ajax) все еще продолжается.

Мои сценарии выглядят так:

function loadPartialView_1(){
        $('#DivPartialView_1').show();
        $('#DivPartialView_2').hide();

        $('#DivPartialView_1').load('/PartialViewData_1’);
    }

function loadPartialView_2(){
    $('#DivPartialView_1').hide();
    $('#DivPartialView_2').show();

    $('#DivPartialView_2').load('/PartialViewData_2’);
}


$('#btnShowPartial_1').click(function () {
    function RefreshPartial_1(){
        //this will wait 3 seconds and then fire the load partial function
        setTimeout(function(){
            loadPartialView_1();
            //recall this function so that it will continue to loop
            RefreshPartial_1();
        }, 5000);
    }
    //initialize the loop
    RefreshPartial_1();
});

$('#btnShowPartial_2').click(function () {
    function RefreshPartial_2(){
        //this will wait 3 seconds and then fire the load partial function
        setTimeout(function(){
            loadPartialView_2();
            //recall this function so that it will continue to loop
            RefreshPartial_2();
        }, 5000);
    }
    //initialize the loop
    RefreshPartial_2();
});

Где можнобыть проблема или что может быть лучшим решением?

Спасибо