Как сделать активным часть кода только на той странице, которая активна. Мне это надо, потому что если открыть две страницы, то сайт начнет выполнять 2 Ajax запроса и т.д.
не решает, если есть циклически выполняющийся код на странице и его нужно затормозить при открытии сайта в другом табе. Тут может быть что-то на основе localStorage. Код (Javascript): let currentTime = 0; const time = () => (new Date()).getTime(); const setNewTime = () => { localStorage.setItem('active', currentTime = time()); }; const runAction = () => { let timer = setInterval(() => { if (currentTime == localStorage.getItem('active')) { console.log('execute request'); } else { console.log('standby'); } }, 2000); }; document.addEventListener('mousemove', setNewTime); document.addEventListener('keydown', setNewTime); document.addEventListener('scroll', setNewTime); document.addEventListener('DOMContentLoaded', () => { setNewTime(); runAction(); }); Вместо Ajax-запросов в цикле, ставлю setInterval. Если началась движуха на соседней вкладке, то время в localStorage измениться и при следующей итерации, не совпадет с тем, что было присвоено переменной currentTime. Если вернемся на предыдущую вкладку и выполниться какое-либо событие, то произойдёт опять смена времени в LS и переменной currentTime для текущего таба, а в не активной будет несовпадение. Минусы и в таком подходе есть, но усталость не дает доработать до нужной кондиции. P.S. Ночное изложение мысли может и сбивчивое, но надеюсь смысл идеи донести получилось. --- Добавлено --- @Danil005, только не делайте Ajax-запросы в setInterval. Лучше запаковать код Ajax в функцию и после успешного завершения текущего запроса, подождать N секунд с вызовом этой же функции.
@Deonis по некоторым причинам, скрипт не работает, я переделал его таким образом: Код (Javascript): var currentTime = 0; function time() { return (new Date()).getTime(); } function setNewTime() { localStorage.setItem('active', currentTime = time()); } function runAction() { setInterval(function () { if ( currentTime == localStorage.getItem('active') ) { console.log('execute request'); } else { console.log('standby'); } }, 2000); } document.addEventListener('mousemove', setNewTime()); document.addEventListener('keydown', setNewTime()); document.addEventListener('scroll', setNewTime()); document.addEventListener('DOMContentLoaded',function () { setNewTime(); runAction(); }); И такая же проблема... --- Добавлено --- И вообще document.addEventListener срабатывает только при загрузки страницы... --- Добавлено --- Однако эта строка работает, если использовать window за место document. Код (Javascript): document.addEventListener('DOMContentLoaded',function () { runAction(); setNewTime(); });
Все, переделал код таким образом и все стало работать: Код (Javascript): var currentTime = 0; function time() { return (new Date()).getTime(); } function setNewTime() { localStorage.setItem('active', currentTime = time()); } function runAction() { setInterval(function () { if ( currentTime == localStorage.getItem('active') ) { console.log('execute request'); currentTime = 0; } else { console.log('standby'); } }, 2000); } $(document).on('mousemove', function () {setNewTime();}); $(document).on('keydown', function () {setNewTime();}); $(document).on('scroll', function () {setNewTime();}); $(function() {runAction();});
Ошибка архитектуры. И на этой ошибке строятся костыли. Постарайтесь еще раз глянуть на задачу. К примеру кроме storage, могут быть сокеты, сессии и другой подход