jQuery: offset() animation and ajax

本文关键字：animation and ajax offset jQuery 更新时间：2023-09-26

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

Moi aussi！

是的，也有同样的问题——这被称为比赛条件。我有一个按钮-我不知道你是不是在用一个？

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

这起到了防止第二次点击的效果。当ajax返回结果时，我重新启用了该按钮。在这种情况下，您必须在动画之后的某个位置使用回调来重新启用按钮。