绑定到popstate事件的窗口两次触发

Question

仅将窗口（在jQuery中绑定）到popstate，该事件总是被触发两次。

$( window ).bind( 'popstate', myFunction );

myFunction（）中没有导致此的原因-我尝试将这个函数剥离为一个简单的方法：

console.log( 'triggered' );

结果是一样的。它总是触发两次（在Safari，Chrome和Firefox中测试）。

我知道HTML5历史记录API出现问题，但是不胜感激，请您收到除'try History.js'以外的任何建议！

Answer 1

确定，我想出了一种解决方法：

jQuery( function( $ ){

  var currentPageNo = location.hash || 1;

  var myFunction = function(){

    var pageNo = location.hash;

    if( pageNo != currentPageNo ){

      // trigger AJAX stuff here

      currentPageNo = pageNo;

    }

  };

  $( window ).bind( 'popstate', myFunction );

});

仅触发一次功能，但状态仍触发两次！

Answer 2

popstate事件在使用历史记录API（即histry.back（）和history.go（-1）时）被触发了两次。但只需使用浏览器后退按钮一次。

我使用超时作为解决方法：

var timeout = null;
$(window).bind('popstate', function(event) {
    clearTimeout(timeout);
    timeout = setTimeout(function() {
        console.log( 'triggered' );
    }, 50);
});

Answer 3

我在reactjs中处理后退按钮时遇到以下问题

1. 第一次未调用第一个[[popstate事件
执行后退按钮自定义逻辑后被调用两次

为了解决问题1，我做了以下代码

  componentWillUnmount = () => {
    window.removeEventListener('popstate', this.onBackButtonEvent);
  }

解决问题2，我在下面的代码中做了，
   onBackButtonEvent = (e) => {
    e.preventDefault();
    if (!this.isBackButtonClicked) {

  if (window.confirm("Do you want to save your changes")) {
       this.isBackButtonClicked = true;
       // your custom logic to page transition
        } else {
         window.history.pushState(null, null, window.location.pathname);
         this.isBackButtonClicked = false;
       }
    }
  }

不要忘记在构造函数中添加
this.isBackButtonClicked = false;并取消显示事件。
  componentWillUnmount = () => {
    window.removeEventListener('popstate', this.onBackButtonEvent);
  }