如何实现每次点击浏览器窗口返回按钮时都触发指定函数

问题根源 #

你遇到的重复触发问题核心原因是每次调用call()函数时，都重复给window绑定了新的popstate事件监听器，旧的监听器没有被移除，点击返回时所有绑定的监听器都会同时执行，就出现了触发次数指数级增长的问题。同时你不需要每次触发事件都重新绑定监听器，只需要在事件触发后重新往历史栈中插入一条记录即可。

修复方案 #

最优写法（推荐）

事件监听器仅绑定一次，每次触发popstate后仅重新插入历史记录即可：

$(function() {
  // 兼容性判断，不支持的浏览器直接跳过
  if (!window.history || !window.history.pushState) return;

  // 事件监听器全局仅绑定一次
  $(window).on('popstate', function () {
    alert('Back button was pressed.');
    // 触发后重新插入历史记录，保证下次返回操作可被捕获
    window.history.pushState('', null, './');
  });

  // 页面初始化时插入第一条历史记录
  window.history.pushState('', null, './');
});

配套HTML引入代码：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

兼容原有逻辑的写法

如果你的业务需要保留原来的call()函数封装模式，可以在每次绑定事件前先移除旧的同类型监听器，避免重复绑定：

function handleBackEvent() {
  alert('Back button was pressed.');
  call();
}

function call() {
  if (window.history && window.history.pushState) {
    window.history.pushState('', null, './');
    // 先解绑旧的监听器，再绑定新的，避免重复注册
    $(window).off('popstate', handleBackEvent).on('popstate', handleBackEvent);
  }
}

$(document).ready(function () {
  call();
});

内容的提问来源于stack exchange，提问作者Ambiguous Turtle