用户行为监控怎么避免重复上报？

UP主～翌岍提问于 2026-03-21 19:01:24 阅读 9

优化

我在做用户点击行为埋点，用的是 addEventListener 监听 click 事件，但发现同一个按钮快速点几次会触发多次上报，数据就失真了。

试过加个 flag 标记是否正在上报，但页面跳转快的时候还是会有重复。有没有更靠谱的防重方案？比如是不是该用防抖或者节流？

这是我现在写的简易上报函数：

function trackClick(element) {
  const handler = () => {
    sendBeacon('/log', { action: 'click', id: element.id });
  };
  element.addEventListener('click', handler);
}

我来解答赞 9 收藏

反馈

1 条解答

技术爱军 Lv1

优化一下你的上报函数，可以用防抖来处理这个问题。防抖可以确保在短时间内多次触发事件时，只执行一次上报操作。你可以借助 lodash 库里的 debounce 函数，或者自己简单实现一个。

这里给你一个简单的实现方式：

function debounce(func, wait) {

  let timeout;

  return function(...args) {

    const context = this;

    clearTimeout(timeout);

    timeout = setTimeout(() => func.apply(context, args), wait);

  };

}



function trackClick(element) {

  const handler = debounce(() => {

    sendBeacon('/log', { action: 'click', id: element.id });

  }, 300); // 300ms 内只触发一次上报



  element.addEventListener('click', handler);

}

这样改过后，即使用户快速点击多次，上报请求也会被限制在一个合理的频率内，减少重复上报的问题。

2026-03-21 19:02