У меня стоит задача сделать интерактивный выбор квартир в доме. Реализовано на svg. При клике на элемент
g(g - разделяет области для наведения, а области это квартиры) я открываю окно с данными о квартире. В силу структуры, все данные загружаются через
ajax. Все ок. 1 Клик, 1 запрос, данные получил.
Но так же появилась надобность сделать всплывающую подсказку, которая появляется при наведении на элемент
g. В ней указывается цена квартиры, площадь и т.д. Значит, приходится делать снова запрос, но вот не задача, пока тестировал, понял, что каждый ховер на один и тот же элемент - это еще один запрос. А их может быть сотни за пару секунд, просто дрыгая мышкой. Посоветуйте, как реализовать так, что бы уменьшить кол-во запросов к бд.
Вот код для ховера:
$(document).on('mouseover', '.apartment', function() {
var id = $(this).attr('id').substr(0,3),
gData = $(this)[0].getBoundingClientRect();
tooltip = $('#tooltip'),
tipNum = $('#tipNum'),
tipArea = $('#tipArea'),
tipPrice = $('#tipPrice');
// Сделаем запрос к бд и вытащим наши данные
$.ajax({
url: '/request.php?a=apartment',
type: 'post',
data: {id: id}
}).done(function(res) {
if(res){
// Разложим нашу инфу по полочкам
tipNum.html(res.apartment.num);
tipArea.html(res.apartment.area);
tipPrice.html(res.apartment.price);
if(res.apartment.num || res.apartment.area || res.apartment.price){
tooltip.show();
tooltip.css({
'top': gData.top + (gData.height / 2) - 100,
'left': gData.left + gData.width + 15
});
}
}
}).fail(function() {
console.log("Не удалось получить данные о квартире!");
});
});
