javascript - HTML5 History API 需要双击后退

Question

我正在使用 ajax 和 HTML5 历史记录 API 来实现分页。让我描述一下事件的顺序来解释我的问题。

我有以下 4 个分页页面。

1 - 2 - 3 - 4

这是发生的事情的顺序。

• 打开页面
• 点击“2”//一切顺利
• 点击“3”//一切顺利
• 点击“4”//一切顺利
• 点击 Chrome 浏览器后退按钮//转到第 3 页，一切顺利 **- 单击 Chrome Browner 后退按钮//停留在第 3 页。
• 快速双击后退按钮//转到第 2 页**

我不明白为什么双击后退可以得到所需的结果，但 1 次后退却不起作用。这是我的简化代码。

function fetch(val) {
  var page = val;

  // Ajax Request Code

  success: function (data) {
     // Some processing code
     window.history.pushState(page, '', '/mydata/page-num-' + page);

  },

  // Other Ajax Request Code

}

window.onpopstate = function(event) {
    fetch(parseInt(event.state))
};

传递给我的获取函数的值只是一个整数。任何帮助，将不胜感激。谢谢!

Answer 1

我解决了我的问题。

从 4 -> 3 发生的问题是，从“onpopstate”调用“fetch function”不应导致 PushState。双击起作用的原因是因为“onopopstate”在 PushState 有机会覆盖之前被执行了两次。