在匿名函数上添加和删除EventListener

问题描述

我正在尝试编写一个函数来处理当用户切换到另一个选项卡以测量用户不活动多长时间时的空闲时间。然后，将空闲时间与页面中经过的时间相乘，以使页面中经过实时。我也希望此功能与我的页面计时器无关，这就是为什么我想对这两个时间做些保留。

这是我的代码形式处理空闲时间：

idle_time() {
      document.addEventListener("visibilitychange",this.idle_time_event)
    }

    idle_time_event() {

      var idle_time = 0;
      var idle_timer;

      console.log(document.hidden);
      if (document.hidden) {
        idle_timer = setInterval(function () { idle_time++; console.log(idle_time); },1000);
      }

      if (!document.hidden) {
        clearInterval(idle_timer);
        console.log("clear");
        this.idle.push(idle_time);
        idle_time = 0;
      }

    }


    clear_idle() {
      this.idle = [];
      this.sum = 0;
      document.removeEventListener("visibilitychange",this.idle_time_event)
      console.log("clear event")
    }

当我进入页面时，我打电话给idle_time（），后者在 visibilitychange 上创建一个侦听器。隐藏文档时，我启动了一个计时器，当文档再次处于活动状态时，我想停止计时器，将时间推入数组并重置计时器。

切换页面时，我对数组中的所有值求和以得到总的非活动时间，然后调用clear_idle（）重置数组的总和，并删除侦听器以防止下一页发生重复事件。

但是我遇到几个问题：

我无法访问“ this”（this.idle）（我想是因为我没有在监听器中以匿名方式调用我的函数。但是我也需要在切换页面时删除监听器，我陷入了恶性循环
“ clearInterval（idle_timer）”不起作用，即使我以匿名方式调用该函数，计时器也会在id_time上进行迭代。
当我在数组中推送idle_value时，将推送初始值（为0），而不是实际的值（假定是由idle_timer进行迭代）。我认为问题在于，当在侦听器中调用该函数时，会重新设置值idle_time，但我不知道如何处理

在此先感谢您的建议。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

idle-timer javascript timer timer