Регулярная проверка значения в LocalStorage?

Question

[Александр Лебедев]

Преамбула: есть код, представленный глубокоуважаемым товарищем Сергей Мельников , который позволяет отслеживать событие происходящее через определенный период времени (в данной ситуации через 2 минуты), вне зависимости от перемещения посетителя по страницам сайта.

Зачем это нужно: для отслеживание целей в Яндекс.Метрике по времени пребывания на сайте.

Суть: код срабатывает каждый раз при заходе на какую-либо страницу, и если к тому времени 2 минуты уже прошло - срабатывает событие, все ок. Но, если пользователь уйдет со страницы не переходя на новую - событие не сработает.

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

Со своей стороны пытался делать функцию с setInterval после else (и в разных других местах), выполняя ее каждую секунду, но не работает, и я даже подозреваю почему.

$(function(){
    checkTime(function(){
        alert('2 minutes')
    });
});

function checkTime(callback){
    var time = 120; //время, в секундах
    if ( localStorage ) {        
        if (localStorage.userEnter == "end") return;
        if (!localStorage.userEnter) localStorage.userEnter = new Date().getTime();
        else if ((new Date().getTime() - localStorage.userEnter) > time * 1000 ) {
            callback && callback();
            localStorage.userEnter = "end";
        }
    }    
}

Буду благодарен за помощь.

Answer 1

[Николай Васильчук]

Попробуйте так:

$(function() {
    var time = 20; // Time in seconds
    var callback = function() {
        alert(time + ' seconds');
    };
    (function checkTime() {
        if (!localStorage) return;
        localStorage.userEnter = localStorage.userEnter || new Date().getTime();
        if ((new Date().getTime() - localStorage.userEnter) >= time * 1000) {
            localStorage.removeItem('userEnter');
            callback();
            return;
        }
        setTimeout(checkTime, 5000);
    })();
});

Comments

[Александр Лебедев]

Работает) Спасибо. А почему поставили интервал в 5 секунд? Это как-то серьезно влияет на работу страницы?

[Николай Васильчук]

Можете изменить по вкусу. Вообще, чем реже, тем лучше, но задачи бывают разные. Серьезной нагрузки от такой функции не будет.

[Николай Васильчук]

А вообще, нет смысла делать чаще, т.к., если пользователь перейдет на другую страницу, то проверка выполнится сразу, а если не перейдет, то 5 секунд не такая большая задержка при интервале в 2 минуты.

[Александр Лебедев]

@Anonym Тогда еще раз спасибо, буду пользовать :)

[Александр Лебедев]

@Anonym а если он выйдет в.. Логично. Нет ситуации, в которой я его не смониторю. Хотел поговорить о "2:04" и т.п., но понял, что уже на 2х его поймаю, а если меньше 2х - уже и не считается :)

[Николай Васильчук]

При кратных секундах (5 и 120) вы поймаете его на 120, а если вам надо будет не 120 секунд проверять, а 121, то на 121 секунде вы его не поймаете и на 121-124 он сможет выйти не записав результат. Но мне кажется, что это можно списать на погрешность измерений и не проверять некратные значения ))

[Александр Лебедев]

@Anonym Да-да, это и имел в виду) Единственное, я сделал 2 отслеживания - на 1 минуту и на 5, в общих чертах это будет полезнее. По сути, между ними даже воронку делать можно, чтобы оценивать восприятие контента, или сколько в среднем минут до звонка.

[Николай Васильчук]

Я надеюсь вы просто добавили условие и не крутите 2 таймера? )

[Александр Лебедев]

@Anonym Ммм.. Я не буду отвечать на этот вопрос..) Суть понял.

[Николай Васильчук]

Суть в том, что если вы скопируете приведенную функцию и запустите ее дважды, то возникнет проблема, т.к. оба экземпляра будут использовать одно значение localStorage.userEnter. Вам же надо из проверки на 1 секунду убрать удаление localStorage.userEnter и return, а после нее добавить elseif с проверкой на 5 секунд и уже с удалением и return, чтобы остановить таймер. Если объяснил непонятно, могу прислать исправленный вариант кода.

[Александр Лебедев]

@Anonym Разберусь. Спасибо.

[Александр Лебедев]

@Anonym самой большой проблемой оказалось понять, что такое elseif..)

[Николай Васильчук]

Elseif это if (...) {...} else if (...) {...}

[Александр Лебедев]

@Anonym Ну, я так и решил, но у меня до бесконечности выполнялось первое условие, а потом первое и второе) А мне надо было, чтобы и первое и второе выполнились по 1 разу.

[Александр Лебедев]

@Anonym Не до бесконечности, пардон, а до выполнения второго условия, в конце которого шел return.

Answer 2

[Сергей Мельников]

$(function() {

	check(function(){
		alert("Done");
	}, 10);
    
});

function check(callback, seconds){	
	var LS = localStorage;
	if (!LS || LS.enter == "done") return;
	LS.enter = LS.enter || new Date().getTime();
	if ((new Date().getTime() - LS.enter) >= period * 1000) (LS.enter = "done") && callback();
	else setTimeout(check, 5000, callback, seconds);
}

где то так )

Comments

[Александр Лебедев]

@mlnkv period вместо seconds, но смысл понял)

Answer 3

[Сергей Мельников]

а еще так можно:

$(function() {

	check("first_event", function(){
		alert("First Event Done");
	}, 10);

	check("second_event", function(){
		alert("Second Event Done");
	}, 20);

	check("thirthd_event",  function(){
		alert("Thirthd Event Done");
	}, 40);
    
});

function check(key, callback, seconds){	
	var LS = localStorage;
	if (!LS || LS["check_"+key] == "done") return;
	LS["check_"+key] = LS["check_"+key] || new Date().getTime();
	if ((new Date().getTime() - LS["check_"+key]) >= seconds * 1000) (LS["check_"+key] = "done") && callback();
	else setTimeout(check, 5000, key, callback, seconds);
}

Comments

[Александр Лебедев]

@mlnkv так как elseif в JS все-таки укрылся от моего понимания, сделал вашим способом) Спасибо еще раз.