当用户在 5 分钟后处于非活动状态时显示弹出窗口

Question

我试图在用户闲置 5 分钟时显示弹出窗口。

  timeout() {
    setTimeout(() => this.openDialog(), 4000);
 }

<h2 mat-dialog-title>Alert!</h2>
<mat-dialog-content class="mat-typography">
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cancel</button>
  <button mat-button [mat-dialog-close]="true"cdkFocusInitial>Ok</button>
</mat-dialog-actions>

在上面的代码中，当您在 2 秒后打开页面时，会显示 this.openDialog() 对话框。但是我想在用户不活动 5 分钟时显示弹出窗口。

Answer 1

有一个变量可以跟踪用户未执行任何操作的毫秒数 activity

检查是否有任何鼠标或键盘 activity - 发生时将计时器重置为 0 这是一个等待 5 秒而不是 5 分钟的示例

var idleTime = 0

document.addEventListener('mousemove', resetIdleTime, false);
document.addEventListener('keypress', resetIdleTime, false);

function resetIdleTime ()
{
    idleTime = 0    
}


function checkIfIdle ()
{
  idleTime += 1000
  console.log(idleTime)
  if (idleTime >= 5000)
  {
    alert("Inactive for 5 seconds")
    clearInterval(idleInterval)
  }  
}

var idleInterval = setInterval(checkIfIdle, 1000);

问题不是很清楚。您是否要检查选项卡是否在 5 分钟内未被关注？页面上有 5 分钟处于非活动状态？无论哪种方式，以上内容都应该为您指明正确的方向

Answer 2

试试这个：

let timer;

function time() {
timer = setTimeout(() => {
     console.log(5000)
}, 5000) 
}

time();

document.addEventListener('click', () => {
  clearTimeout(timer);
  time();
})

当用户在 5 分钟后处于非活动状态时显示弹出窗口

Show popup when user is inactive after 5 minutes

html

javascript

user-inactivity