HTML5 History API требует двойных обратных кликов

Я пытаюсь реализовать нумерацию страниц с помощью ajax и API истории HTML5. Позвольте мне описать последовательность событий, чтобы объяснить мою проблему.

У меня есть следующие 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))
};

Значение, переданное моей функции извлечения, является целым числом. Любая помощь будет оценена. Спасибо!

Источник

1 ответ

Я исправил свою проблему.

Проблема, возникающая из 4 -> 3, заключалась в том, что вызов функции fetch из onpopstate не должен вызывать pushState. Двойной щелчок работал по той причине, что onopopstate выполнялся дважды, прежде чем pushState мог перезаписать.

Источник
Другие вопросы по тегам