jQuery: смещение () анимация и AJAX - PullRequest
Новая
       4

jQuery: смещение () анимация и AJAX

0 голосов
/ 27 мая 2011

У меня небольшая проблема с jQuery ajax и анимацией. У меня есть макет с меню, которое вызывает мою страницу, и при загрузке добавьте небольшую анимацию с jQuery easing

Вот мой ajax.js

$(document).ready(function() {

    // Ajax request
    $(".transition").click(function() {
      page = ( $(this).attr("id") );
      $.ajax({
        type: "GET",
        url: page,
        data: "ajax=true",
        cache: false,
        success: function(html) {
          afficher(html);
        },
        error: function(XMLHttpRequest,textStatus,errorThrows) {
          // Erreur durant la requête
        }
      });
    });

    function afficher(donnees) {
      $(".step").empty();
      $(".step").append(donnees);

      // Animate
      var step_position = $(".step").offset();
      $(".step").offset({ top: step_position.top, left: step_position.left - 1000 });
      $(".step").animate({
          "left": '+=1000',
        }, 750, 'easeOutBack');
    }
});

Если пользователь нажимает, все отлично работает.

Но если:

  • Пользователь дважды щелкает по той же ссылке
  • Пользователь быстро нажимает на несколько ссылок

тогда загруженные данные уходят со страницы.

Я знаю, что есть проблема с тем фактом, что я работаю с асинхронными данными и что я запрашиваю offset в точное время. Я пытался указать константу в качестве параметров (вместо var step_position = $(".step").offset();), но это не сработало.

Как мне сделать так, чтобы мои данные всегда отображались правильно, независимо от того, сколько было сделано вызовов ajax?

1 Ответ

1 голос
/ 27 мая 2011

Мой аусси!

Да, у меня была та же проблема - она ​​называется состоянием гонки.У меня была кнопка - я не знаю, используете ли вы ее?

Что я сделал в обработчике кликов, первым делом я отключил кнопку с помощью функции JQUERY .attr() - добавивотключить атрибут.

Это привело к тому, что второй щелчок не сделал ничего.Я снова включил кнопку, когда Ajax вернулся с результатом.В этом случае вам нужно будет использовать обратный вызов где-нибудь после анимации, чтобы снова включить кнопку.

...