PopState 未按预期工作。答案

【问题标题】：PopState not working as expected.PopState 未按预期工作。
【发布时间】：2023-03-04 23:14:01
【问题描述】：

我在主页上有一个图像列表，单击时我会触发 AJAX 请求以将内容加载到灯箱。我也有他们之间的分页。每次用户单击下一个或上一个箭头时，我都会使用 PushState 更改 URL，并且效果很好。我的后退按钮有问题。有时我需要单击两次或更多次才能返回。当它不返回时，它只会重新加载相同的内容。

$(document).on("click", ".content a", function(event){
  event.preventDefault();
  var url = $(this).attr("href");
  $("body").append($overlay);
  history.pushState({}, '', url);
  $.ajax({
      url : url,
      type : 'GET',
      success : function(data){
        $overlay.append(data);
        $overlay.show();
      }
  });
});

$(document).on("click", ".fa-angle-right", function(event){
  event.preventDefault();
  var url = $(this).parent("a").attr("href");
  history.pushState({}, '', url);
  $.ajax({
      url : url,
      type : 'GET',
      success : function(data){
        $overlay.html(data);
      }
  });
});

$(window).on("popstate", function(event) {
  var url = location.href;
  $.ajax({
      url : url,
      type : 'GET',
      success : function(data){
        $overlay.html(data);
      }
  });
});

【问题讨论】：

你是否曾经两次推送同一个状态？如果您是，或者您的事件处理程序意外导致了这种情况，它可能会解释为什么您必须告诉它返回两次或更多次。
是的，你是对的。每次我关闭灯箱并再次打开它时，它都会添加一个额外的请求。我需要看看它为什么这样做。感谢您指出问题。
酷。我把它作为答案，以便您可以将其标记为已解决。

标签： javascript ajax

【解决方案1】：

您很可能两次推送相同的状态，可能事件处理程序触发不止一次。

当您调试原因时，您将解决您的行为不端 PopState 的情况:)

【讨论】：