0

我对 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 调用，我应该如何始终正确显示我的数据？

4

1 回答 1

1

莫伊阿西！

是的，有同样的问题——它被称为竞争条件。我有一个按钮 - 我不知道你是否正在使用一个？

我所做的是在点击处理程序中，我做的第一件事是使用 JQUERY.attr()函数禁用按钮 - 添加禁用属性。

这具有阻止第二次单击执行任何操作的效果。当 ajax 返回结果时，我重新启用了该按钮。在这种情况下，您必须在动画之后的某处使用回调来重新启用按钮。

于 2011-05-27T14:29:16.047 回答