Jquery и AJAX.Положить вызов Ajax между анимациями

Question

Прежде всего позвольте мне сказать вам, что я изучил сценарии самостоятельно, поэтому мои подходы немного странны. Чтобы объяснить, что я хочу сделать, перейдите на этот пример сайта, который я подготовил: Как и должно быть, вроде!

Вы заметите, что когда вы нажимаете на все ссылки, которые появляются после нажатия «Showroom» и всех других кнопок меню, содержимое главного окна изменяется ДО того, как окно сдвинется вниз.

Проще говоря: я хочу, чтобы окно двигалось вниз, сохраняя содержимое до тех пор, пока оно не исчезнет, ​​а затем, когда оно появится справа, оно должно иметь новое содержимое.

текущее содержимое окна: "дом" -> Толчок "личный" -> Окно контента по-прежнему то из "дома" -> движется вниз -> Поставляется с правой стороны с контентом из «личного» * ​​1009 *

Вот Javascript часть AJAX и анимация

 function createRequestObject()
 {
    var ro;
    var browser = navigator.appName;
     if(browser == "Microsoft Internet Explorer")
    {
    ro = new ActiveXObject("Microsoft.XMLHTTP");
 }
    else
    {
    ro = new XMLHttpRequest();
 }
 return ro;

 }

 var http = createRequestObject();

 var katcheck;

 function sndReq(req)
 {

    var req2 = req;

    katcheck = req.slice(0, 1);

    if (katcheck == "k")
    {
    var katid = req2.slice(3,4);

    http.open('get', 'getkat.php?kat='+katid);
    }
    else
    {
    $('#videoleft').animate({"top": "1000px"}, { queue:true, duration:600,  easing: 'easeInQuad'})
              .hide(0).animate({"top": "0px", "left": "800px"},{ queue:true, duration:1});

        http.open('get', 'getwork.php?id='+req);
    }
http.onreadystatechange = handleResponse;
http.send(null);
}


function handleResponse()
{
    if(http.readyState == 4)
                    {
                   var response = http.responseText;
                    }

    if (katcheck == "k")
    {
                document.getElementById("videomenue").innerHTML = response;
    }
    else
    {
        $('#videoleft').show(0).animate({"top": "0px", "left":"0px"},{ queue:true, duration:800,  easing: 'easeOutBack'});

        document.getElementById("post").innerHTML = response;

    }
 }

Хорошо, теперь я объясню часть в начале функции sndReq:

Обычно кнопки в меню просто отправляют числа (которые являются идентификаторами в БД) в sndReq. Например: вы нажимаете «Showroom», затем «k_01» отправляется той же функции sndReq. «K» обозначает категорию, и сценарий сообщает, является ли он запросом категории или нет, разрезая строку.

Надеюсь, вы понимаете, о чем я.

Было бы замечательно иметь фактически окна, одно со старым содержимым, перемещающимся вниз, и в то же время одно новое окно, выходящее с правой стороны с новым содержимым, но когда я попытался установить его с двумя окнами, как в test3 .php (тот же каталог) Я получаю неопределенную проблему.

Я надеюсь, что кто-то может мне помочь. Большое спасибо

Answer 1

Функция animate является асинхронной, что означает, что вы вызываете ее, и ваш код продолжает выполняться, пока анимация происходит ..

Итак, проблема № 1
Вы включаете команду скрытия в анимации, которая скрывает ее в то время, когда анимация запускается (вот почему вспыхивает окно. Анимация повторно показывает окно и продолжает анимацию ..)

Fix
Функция animate также принимает в качестве параметра функцию обратного вызова, выполняемую после завершения анимации.

Здесь вы должны вызвать свой код ajax, чтобы он выполнялся после того, как окно исчезло с экрана.

Я считаю, что следующие изменения в вашей функции sndReq помогут.

function sndReq(req)
 {

    var req2 = req;

    katcheck = req.slice(0, 1);

    if (katcheck == "k")
    {
    var katid = req2.slice(3,4);

    http.open('get', 'getkat.php?kat='+katid);
    http.send(null);
    http.onreadystatechange = handleResponse;
    }
    else
    {
    $('#videoleft')
         .animate(  {"top": "1000px"}, 
                    600, 'easeInQuad',
                    function(){
                                console.log('fetching remote data');
                                var param = req;
                                http.open('get', 'getwork.php?id='+param);
                                http.send(null);
                                http.onreadystatechange = handleResponse;
                              } // this is the callback function 
                 )
         .animate(
                    {"top": "0px", "left": "800px"},
                    1, 
                    function(){$(this).hide();}
                 );

    }
}

Обновление Кроме того, в handleResponse вы должны установить innerHtml для ответа перед запуском анимации.

Также у вас есть двойной скрипт в конце вашего html .. посмотрите на него и удалите дублирующий закрывающий тег ..

QueryLoader.init();
</script>

Обновление 2
Проблема, которую вы описываете в своем комментарии, возникает из-за того, что ваша функция handleResponse вызывается много раз. Это нормально и происходит потому, что событие readystatechange происходит для каждого изменения вызова ajax. Вы должны выполнять действие только после завершения http ( readystate == 4 ), но не при каких-либо изменениях. .

поэтому ваш код должен быть внутри исходного оператора if, чтобы избежать многократного выполнения ..

изменить на

function handleResponse()
{
    if(http.readyState == 4)
         {
          var response = http.responseText;

          if (katcheck == "k")
               {
                document.getElementById("videomenue").innerHTML = response;
               }
          else
               {
                $('#videoleft')
                         .show(0).
                         .animate(
                                  {"top": "0px", "left":"0px"},
                                  { queue:true, duration:800,  easing: 'easeOutBack'}
                                 );
          document.getElementById("post").innerHTML = response;

               }
         }
 }