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

具有一个变量，该变量将跟踪用户未执行任何活动的毫秒数

检查是否有鼠标或键盘活动-将计时器重置为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分钟后用户不活动时显示弹出窗口

2 个答案: