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))
};

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

Answer 1

我解决了我的问题。

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