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

Question

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

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

myFunction() 中没有任何东西会导致这种情况 - 我尝试将此函数剥离为简单的：

console.log( 'triggered' );

结果是相同的。它总是触发两次（在 Safari、Chrome 和 Firefox 中测试）。

我知道 HTML5 历史记录 API 存在问题，但除了“尝试 History.js”之外的任何建议，我们将不胜感激！

Answer 1

好吧，我想出了一个办法来解决这个问题：

jQuery( function( 
nbsp;){

  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，然后立即删除监听器。

如果想在监听器触发后（仅一次）将其释放，可以将以下对象添加到 addEventListener 的第三个参数中：

window.addEventListener('popstate', myFunction, {once: true});

一次

一个布尔值，指示添加后最多调用一次侦听器。如果为 true，则调用时侦听器将自动删除。

这是文档： https://developer.mozilla.org /en-US/docs/Web/API/EventTarget/addEventListener

Answer 3

使用history API时，popstate事件被触发两次，即histry.back()和history.go(-1)。但仅使用浏览器后退按钮一次。

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

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

Answer 4

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

1. 第一个 popstate 事件第一次没有被调用
2. 它在执行我的后退按钮自定义逻辑后被调用两次

以下代码

  componentDidMount() {
    window.history.pushState(null, null, window.location.pathname);
    window.addEventListener('popstate', this.onBackButtonEvent);
  }

以解决问题 1 我执行了 解决问题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);
  }