Доброго времени суток!
Появилась необходимость написать плагин под jQuery, но я в js абсолютный новичок.
Суть плагина: с определенной периодичностью собираются данные о положении курсора и времени, которое он там находится. И так же с определенной периодичностью отправляются ajax-запросы на сервер. Положение курсора рассчитывается относительно объекта.
Суть вопроса: Плагин может работать только с одним объектом. В примере ниже при наведении на '#test2' все сломается. Если убрать курсор с дива то таймеры все еще будут работать. Что с этим делать ума не приложу.
Если появятся замечания к коду, буду рад выслушать что-где неправильно написал.
<div id="test1" class="border">
<div id="test2" class="border"></div>
</div>
$('border').trackCoords({url: 'main.php'}).addClass('check');
Сам плагин
;(function ($) {
var defaultOptions = {
checkInterval: 30,
sendInterval: 3000,
url: ''
};
$.fn.trackCoords = function (option) {
var options = $.extend({}, defaultOptions, option),
element = this,
data = [],
checkTimerId,
sendTimerId;
element.mouseover(function (event) {
var pos = $(event.target).offset(),
timeTrackStart = $.now(),
posX = 0,
posY = 0;
/**
* При перемещении курсора в переменных сохраняются его координаты и время, начиная
* с которого он в них находится.
*/
element.mousemove(function (e) {
posX = e.pageX - pos.left;
posY = e.pageY - pos.top;
timeTrackStart = $.now();
});
/**
* Таймер с определенным интервалом записывает в массив с данными координаты курсора
* и высчитаное время нахождения курсора в них
*/
checkTimerId = setInterval(function() {
data.push({
x: posX,
y: posY,
time: $.now() - timeTrackStart
});
}, options.checkInterval);
/**
* Таймер с определенным интервалом отправляет данные по икузанному 'url'
*/
sendTimerId = setInterval(function () {
$.ajax({
url: options.url,
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(data)
})
.fail(function (jqXHR) {
console.log('Error: (' + jqXHR.status + ') ' + jqXHR.statusText);
}
);
data = [];
}, options.sendInterval);
});
element.mouseout(function () {
clearInterval(checkTimerId);
clearInterval(sendTimerId);
data = [];
});
return element;
};
}(jQuery));
