Проверка актуальности события

Имеется страница со ссылками. При mouseover() ajax'ом (средствами jQuery) подгружается и выводится громоздкий тултип (всплывающая подсказка). При mouseout() - исчезает.На практике получается, что если пользователь к моменту окончания загрузки тултипа уже увел курсор со ссылки, тултип висит и mouseout() не срабатывает.Подскажите пожалуйста, как на момент окончания работы ajax'a проверить, актуально ли еще событие mouseover() ? Ну или, на худой конец, прервать загрузку при срабатывании mouseout(). Желательно в кодах jQuery. Или тут средствами jQuery не обойтись и придется в чистом JS обработку XMLHttpRequest расписывать ?
5 ответов

Может не стоит на события мыши завязывать ajax? А передать все подсказки например как данные в js.Но если все таки надо, то просто надо засекать событие mouseout и mouseover на элементе и соответственно реагировать. Что то типа:
$('a').mouseout(function(){
 $(this).data('whereMouse', 'out');
}).mouseover(function(){
 $(this).data('whereMouse', 'over');
});

//И там где должна сформироваться подсказка:
if ($(this).data('whereMouse') == 'over') {
 // выводим подсказку
}


Хм, вариант с data() как-то даже не рассматривался.Огромное спасибо. Работает !


Вроде то, что мне нужно... Подскажите, как лучше организовать одну вещь... При наведении курсора мыши, подгружается информация. Но это жутко раздражает, потому что она постоянно мешается... Как сделать так, чтобы $.ajax выполнялся через некоторое время. Значит вот код
$('img[uid]').live('mouseover',function () {
 uid = $(this).attr('uid');
 $.ajax({
 
 тут код аякса
 
 });
});
так так... Чуть поэкспериментировал и вроде заработало. Сделал правда чуть иначе. Вот вид моего кода (может его можно улучшить?)
$('img[uid]').live('mouseover',function () {
 uid = $(this).attr('uid');
 whereMouse = 'over';
 $('img[uid="' + uid + '"]').live('mouseout', function(){ // с $(this) не пашет
 whereMouse = 'out';
 });

 setTimeout(function(){
 if(whereMouse == 'over') {
 $.ajax({
 код

 });
 }
 }, 400);
});
live использую, т.к. информация постоянно подгружается


короче потестировал я свой код... Есть небольшой баг, который хотелось бы исправить. Весь вечер голову уже ломаю.........Из-за того, что стоит таймаут, несколько событий могут запуститься одновременно. Стоит мышкой быстро провести по всем элементам и остановиться на последнем, так создается эффект мерцания на последнем. Вот чуть более полный код
$('img[uid]').live('mouseover',function () {
 
 uid = $(this).attr('uid');
 whereMouse = 'over';
 $('img[uid="' + uid + '"]').live('mouseout', function(){
 whereMouse = 'out';
 });

 setTimeout(function(){


 $('#infobar').remove(); // удаляем, если есть. На всякий пожарный

 if(whereMouse == 'over') {

 $.ajax({

 url: local + 'ajax/json/info_u' + uid + '.json',
 dataType: 'json',
 success: function(json) {

 ------------------
 заполняем переменную infobar
 ------------------
 $('#track_controls').append(infobar);
 $("#infobar").fadeIn(300);
 
 $('img[uid=' + uid + ']').live('mouseout',function(){
 $("#infobar").fadeOut(300, function(){
 $(this).remove();
 });
 });
 }
 });
 }
 }, 400);
});
подскажите, что можно сделать?


Всё. Нашёл решение ^_^ Просто очищаю таймер. Вот код
var timer;

$('img[uid]').live('mouseover',function () {
 uid = $(this).attr('uid');
 whereMouse = 'over';
 $('img[uid="' + uid + '"]').live('mouseout', function(){
 whereMouse = 'out';
 });
 if(timer) { // чистим таймер ------ это и есть решение
 clearTimeout(timer); 
 timer = null 
 }
 timer = setTimeout(function(){

 $('#infobar').remove(); // удаляем, если есть. На всякий пожарный

 if(whereMouse == 'over') {

 $.ajax({

 url: local + 'ajax/json/info_u' + uid + '.json',
 dataType: 'json',
 success: function(json) {
 
 infobar = 'ЗАПОЛНЯЕМ';

 //alert(infobar);
 $('#track_controls').append(infobar);
 $("#infobar").fadeIn(300);
 
 $('img[uid=' + uid + ']').live('mouseout',function(){
 $("#infobar").fadeOut(300, function(){
 $(this).remove();
 });
 });
 }
 });
 
 }
 }, 400);
});