javascript - 使用 JavaScript 在点击时重置计时器

Question

我有这个 JS 代码:

<script>
$(document).ready(function () {
    window.setTimeout(function () {
        $('#logout_warning').reveal();
    }, 6000)
});
$(document).ready(function () {
    window.setTimeout(function () {
        location.href = "/login/logout.php?url=/index.php?r=inactivity";
    }, 12000)
});
</script>

它在 X 秒后显示 DIV，然后在 Y 秒后重定向页面

有没有办法创建一个链接，将计时器重置回 X 秒，而无需刷新页面？

Answer 1

您可以像这样为 setTimeout 编写一个包装器

function myTimeout(fn, delay) {
    var o = {i: null};
    o.cancel = function () {
        if (o.i) window.clearTimeout(o.i);
    };
    o.reset = function () {
        if (o.i) window.clearTimeout(o.i);
        o.i = window.setTimeout(fn, delay);
    };
    o.reset();
    return o;
}

然后

// common (ancestor?) scope
var t;

// descendant scope, set
t = myTimeout(function () {
    $('#logout_warning').reveal();
}, 6000);

// descendant scope where you attach listener to your link
$('#my_link').on('click', function () {
    t.reset(); // re-start the timeout
    return false;
});