1

我试图在用户处于非活动状态 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>

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

4

2 回答 2

3

有一个变量来跟踪用户没有做任何活动的毫秒数

检查任何鼠标或键盘活动 - 当它发生时将计时器重置为 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 分钟？无论哪种方式，以上内容都应该为您指明正确的方向

于 2018-11-01T20:04:22.610 回答
2

尝试这个：

let timer;

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

time();

document.addEventListener('click', () => {
  clearTimeout(timer);
  time();
})
于 2018-11-01T20:11:32.837 回答