HTML5历史记录API需要双击点击

Question

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

我有以下4个分页页。

1 - 2 - 3 - 4

以下是发生的事情序列。

• 打开页面
• 点击'2'//全部好
• 点击'3'//全部好
• 点击'4'//全部好
• 点击Chrome浏览器后退按钮//转到第3页，全部好 ** - 点击Chrome浏览器后退按钮//停留在第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 - ＆gt; 3是'onpopstate'对'fetch function'的调用不应该导致pushState。双击工作的原因是因为'onopopstate'在pushState有机会覆盖之前被执行了两次。