javascript - 如何在 10 秒不活动后显示弹出窗口

Question

我想在用户不活动 10 秒后弹出价格警报。现在，弹出窗口仅在单击时出现。我想更换它。

我已经尽力了，但还是没能完成。

$(document).ready(function () {
  var idleInterval = setInterval(inActiveTimer, 1000);
  $(this).mousemove(function (e) {
    idleTime = 0;
  });
  $(this).keypress(function (e) {
    idleTime = 0;
  });
  $(".sleepy-close, .sleepy-overlay, .sleepy-wake-up").click(function () {
    $(".sleepy-overlay").hide();
    clearInterval(idleInterval);
  });
});

代码的最后一部分导致点击启用弹出窗口。如何将其替换为 10 秒不活动后自动弹出的窗口。

Answer 1

这将帮助您捕获屏幕中 10 秒的不活动状态。根据需要更改代码。

document.body.innerText = "hello count the seconds";
setIdleTimeout(10000, function() {
    document.body.innerText = "Where did you go?";
}, function() {
    document.body.innerText = "Welcome back!";
});



function setIdleTimeout(millis, onIdle, onUnidle) {
    var timeout = 0;
    startTimer();

    function startTimer() {
        timeout = setTimeout(onExpires, millis);
        document.addEventListener("mousemove", onActivity);
        document.addEventListener("keypress", onActivity);
    }
    
    function onExpires() {
        timeout = 0;
        onIdle();
    }

    function onActivity() {
        if (timeout) clearTimeout(timeout);
        else onUnidle();
        //since the mouse is moving, we turn off our event hooks for 1 second
        document.removeEventListener("mousemove", onActivity);
        document.removeEventListener("keypress", onActivity);
        setTimeout(startTimer, 1000);
    }
}