Как автоматически обновить HTML, только если на странице не было активности?

Question

У меня есть веб-сайт, который я хотел бы автоматически обновлять ТОЛЬКО, если пользователь не использует его в течение определенного времени (например, 180 секунд). Существует ли способ автоматического обновления HTML, только если на странице не было никаких действий

Спасибо!

Answer 1

Два подхода:

1. Используйте таймер раз в секунду и значение тайм-аута.

Вы, вероятно, хотите обернуть это в объект:

var activityHandler = (function() {
    var timerHandle = 0,
        timeout;

    flagActivity();

    function start() {
        stop();
        flagActivity();
        timerHandle = setInterval(tick, 1000);
    }

    function stop() {
        if (timerHandle != 0) {
            clearInterval(timerHandle);
            timerHandle = 0;
        }
    }

    function flagActivity() {
        timeout = new Date() + 180000;
    }

    function tick() {
        if (new Date() > timeout) {
            stop();
            location.reload();
        }
    }

    return {
        start:        start,
        stop:         stop,
        flagActivity: flagActivity
    };
})();

Затем запустите его при загрузке страницы:

activityHandler.start();

И пингуйте его каждый раз, когда видите «активность»:

activityHandler.flagActivity();

Так, например, вы можете сделать это:

if (document.addEventListener) {
    document.addEventListener('mousemove', activityHandler.flagActivity, false);
}
else if (document.attachEvent) {
    document.attachEvent('onmousemove', activityHandler.flagActivity);
}
else {
    document.onmousemove = activityHandler.flagActivity;
}

2. Используйте таймер, который вы сбрасываете каждый раз, когда появляется «активность».

Это менее продолжительная работа (у нас ничего не происходит каждую секунду), но больше работы, когда вы отмечаете, что активность произошла.

Установите таймер для обновления:

var handle = setTimeout(function() {
    location.reload();
}, 180000);

... а затем отмените и перенесите его в любое время, когда вы увидите то, что вы считаете "деятельностью":

clearTimeout(handle);
handle = setTimeout(...);

Вы можете заключить это в функцию:

var inactivityTimerReset = (function() {
    var handle = 0;

    function reset() {
        if (handle != 0) {
            clearTimeout(handle);
        }
        handle = setTimeout(tick, 180000);
    }

    function tick() {
        location.reload();
    }

    return reset;
})();

// Kick start
inactivityTimerReset();

// ...and anywhere you see what you consider to be activity, call it
// again
inactivityTimerReset();

Затем, снова, пингуйте это на каждом действии. Но это намного больше работы, чем я бы поместил в обработчик перемещения мыши, поэтому решение №1 выше.

Answer 2

var docTimeOut;
function bodyTimeOut()
{
    docTimeOut=setTimeout(function(){location.reload();},18000);
}

function resetTimeOut()
{
    clearTimeout(docTimeOut);
    bodyTimeOut();
}


document.onload = bodyTimeOut;

document.body.onmouseover= resetTimeOut;

Answer 3

Вы можете использовать onblur и onfocus на элементе body, чтобы увидеть, есть ли какое-либо действие на вашей странице.

Answer 4

Вы можете объявить переменную pageActive или что-то еще, установить для нее значение false, и всякий раз, когда пользователь что-то делает, устанавливают значение true.Затем задайте функцию для периодического выполнения так часто, как вы хотите, с помощью setinterval(), которая проверяет эту переменную, если она имеет значение true, установите ее на false, чтобы начать снова, если false, то обновите страницу.