js如何处理同时发生的事件？

Question

例如

window.addEventListener('pagehide', () => {
  // 其他逻辑
  print();
});
document.addEventListener('visibilitychange', () => {
  // 其他逻辑
  print();
});

function print() {
  console.log(1)
}

刷新页面的时候都会触发pagehide和visibilitychange，同时执行了一个print的方法，但我现在想要触发最后那一次print的逻辑该如何设计呢？就是有一个类似于节流的概念，请大佬指点一下~

Answer 1

你需要的应该是防抖函数：

function debounce(fn, delay) {
    var timer;
    return function() {
        if (timer) clearTimeout(timer);
        var context = this;
        var args = arguments;
        timer = setTimeout(function() {
            fn.apply(context, args);
        }, delay);
    }
}
window.addEventListener("pagehide", debounce(() => {
    // 其他逻辑
    print();
}, 150));
document.addEventListener("visibilitychange", debounce(() => {
    // 其他逻辑
    print();
}, 150));
function print() {
    console.log(1);
}

Answer 2

两种事件是有些重合的吧，如果你是想做safari的兼容性的话，那就判断一下浏览器环境呗，如果是safari浏览器就使用pagehide触发回调，其他浏览器就使用visibilitychange触发回调。