Отслеживать, как долго пользователь просматривает слайд слайд-шоу с изображениями.

Question

В настоящее время я работаю над проектом, который требует, чтобы веб-приложение отслеживало, как долго пользователь остается на одном слайде слайд-шоу. Скажем, в онлайн-слайд-шоу 5 слайдов (от слайд-1.png до слайд-5.png), пользователь может перемещаться по слайд-шоу с помощью кнопок "Далее" и "Предыдущий".

Пользователь всегда запускает слайд-1.png, через 5 секунд пользователь нажимает кнопку "Далее" и переходит на слайд-2.png. Через 10 секунд пользователь нажал "Предыдущий", чтобы вернуться назад, и остался там на 5 секунд.

Это в основном приложение на основе событий. Время начнет запись, когда пользователь нажмет "Далее" или "Предыдущий", прекратит запись старого сеанса и начнет запись нового сеанса, когда пользователь снова нажмет "Далее" или "Предыдущий".

Пользователь не переходит на новую html-страницу после нажатия "Далее"/"Назад". Это просто изображения, изменяющие информацию SRC.

Любые идеи о том, как я должен подходить к этому? В настоящее время я использую PHP, Javascript и Java в своем веб-приложении.

Answer 1

Функция JavaScript, которая циклически повторяется и "нюхает" заданные вами условия, лучше всего подойдет для этого сценария. Подход, который вы должны использовать, - назначить каждому.png свой собственный атрибут ID. Создайте переменные с помощью JavaScript и jQuery, которые специально предназначены для каждого изображения. Затем прикрепите к слайд-шоу событие mousedown или click, которое определит, какое изображение является видимым, и активирует таймер для этого конкретного изображения. Конечно, вам понадобятся поля ввода, скрытые на странице для каждого изображения, в которое будет увеличиваться счетчик.

В ссылке вы увидите похожую функциональность, благодаря которой, когда пользователь нажимает на компонент "увеличение", запускается таймер. Он остановится только тогда, когда пользователь нажмет на изображение.

Функция JavaScript - это вызов setInterval(), который можно остановить с помощью clearInterval(). Для достижения наилучших результатов создайте функцию setInterval() в качестве переменной.

Пример переменной:

var firstSlide = jQuery('img#slide1');

Образец условия 01:

if (firstSlide.length > 0)
{
    //start counter with setInterval();
}

Пример условия 02:

if (firstSlide.is(':visible'))
{
    //start counter with setInterval();
}

Чтобы обеспечить минимальное перекрытие таймера и обеспечить более строгое поведение, я бы предложил применить уникальный класс CSS к контейнеру слайд-шоу, когда он виден при нажатии, и удалить его, когда он не виден.

Образец Условие 03:

slideShow.click( function() {
slideShow.addClass('isClicked');
});
if (firstSlide.is(':visible') && jQuery('slideShow.isClicked').length > 0)
{
    //start counter with setInterval();
}

http://www.alexldixon.com/clicktimerhelp.htm

Другой пример, в котором setInvertval может "анализировать" динамические условия, - выравнивание высоты элементов даже при изменении размеров окна и переноса текста.

https://jsfiddle.net/dixalex/ojoevj1k/

var makeSameHeight = setInterval( function() {
    var currentTextHeight = $('div.myClass-content').height() + "px";
    var imgDivHeight = $('div.imgUrl').height() + "px";
    if (currentTextHeight === imgDivHeight)
    {
        var doNothing = "";
    } else {
        $('div.imgUrl, div.postImageUrl, a.myClass').css("height", currentTextHeight);
    }
}, 50);

Наконец, вы также можете использовать новую функцию Date().

Надеюсь, это поможет.

Answer 2

Вы захотите зафиксировать время, когда они начнут просматривать слайд:

var startTime = new Date();

Затем запишите время, когда слайд исчезнет:

var endTime = new Date();

Затем вы можете рассчитать прошедшее время.

var elapsed = endTime - startTime; // elapsed time in milliseconds

Если вам необходимо учитывать случай, когда пользователь открывает слайд, а затем уходит от компьютера, вы также можете запустить таймер тайм-аута, который будет регистрировать пользователя как тайм-аут для этого слайда.

setTimeout(function () {
  endTime = 'Timed out.';
}, ((3 * 60) * 60) * 1000); // ((3hrs * 60mins) * 60secs) * 1000ms

Через 3 часа он установит endTime в 'Timed out.' и вы можете использовать это, чтобы знать, что пользователь отошел от этого конкретного слайда и не завершил просмотр остальных.