Помогите разобраться с mouseenter / mouseleave и setTimeout
 

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

Удалось построить следующий код:

$('.view-display-id-page_1').on('mouseenter', '.views-col', function() {
		var tempThis = $(this);
		var TimerInterval = setTimeout(function(){
			$(tempThis).addClass('mouseenter');
			$(tempThis).find('.views-field-title .field-content > a').addClass('mouseenter');
			$(tempThis).find('.views-field-field-spisok-dat .field-content').addClass('mouseenter');
		}, 1000);
	})
 	$('.view-display-id-page_1').on('mouseleave', '.views-col', function() {
		var tempThis = $(this);
			$(tempThis).removeClass('mouseenter');
			$(tempThis).find('.views-field-title .field-content > a').removeAttr('class');
			$(tempThis).find('.views-field-field-spisok-dat .field-content').removeClass('mouseenter');
		clearTimeout(TimerInterval);
	})

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

Безрезультатно бьюсь над задачей весь день. Прошу помощи как для совсем для начинающих.

Спасибо

alecto,
вопрос почему никогда не сработает строка 14?

хм...
заменил
var TimerInterval = setTimeout(function(){
на
TimerInterval = setTimeout(function(){

вроде заработало!
получается, что переменная была объявлена в одной функции и не была доступна в другой.

насколько будет корректен код без испольщования вара?

alecto,
что мешает обьявить переменную в строке ноль

alecto,
http://javascript.ru/forum/events/63...i-uslovii.html

мешает недостаток знаний.
благодарствую за подсказки!

сделал так:

var TimerInterval;
	$('.view-display-id-page_1').on('mouseenter', '.views-col', function() {
		var tempThis = $(this);
		TimerInterval = setTimeout(function(){
			$(tempThis).addClass('mouseenter');
			$(tempThis).find('.views-field-title .field-content > a').addClass('mouseenter');
			$(tempThis).find('.views-field-field-spisok-dat .field-content').addClass('mouseenter');
		}, 500);
	})
 	$('.view-display-id-page_1').on('mouseleave', '.views-col', function() {
		var tempThis = $(this);
			$(tempThis).removeClass('mouseenter');
			$(tempThis).find('.views-field-title .field-content > a').removeAttr('class');
			$(tempThis).find('.views-field-field-spisok-dat .field-content').removeClass('mouseenter');
		clearTimeout(TimerInterval);
	})

вроде работает.
спасибо.

ок

alecto,
Еще чуть подправил, сократил

var TimerInterval;
$('.view-display-id-page_1').on('mouseenter', '.views-col', function() {
	clearTimeout(TimerInterval);
	var tempThis = $(this);
	TimerInterval = setTimeout(function(){
		tempThis.addClass('mouseenter').find('.views-field-title .field-content > a').addClass('mouseenter');
		tempThis.find('.views-field-field-spisok-dat .field-content').addClass('mouseenter');
	}, 500);
}).on('mouseleave', '.views-col', function() {
	clearTimeout(TimerInterval);
	$(this).removeClass('mouseenter').find('.views-field-title .field-content > a').removeAttr('class');
	$(this).find('.views-field-field-spisok-dat .field-content').removeClass('mouseenter');
});

добрый день.
переделал скрипт, заменив его следующим:

var tempTriger = 0;

		$('.view-tury.view-display-id-page_1 .views-col').mousemove(function(e) {


			if (tempTriger == 0) {
				var tempThis = $(this);
				$("#main").append('<div id="follower">' + $(tempThis).html() + '</div>');
				$('#follower').show();
				tempTriger = 1
			}

      var tempLeft = e.pageX + 325;
      if ( $(window).width() > tempLeft ) {
        $('#follower').offset({
          left: e.pageX + 20,
          top: e.pageY + 30
        });
      } else {
        $('#follower').offset({
          left: e.pageX - 300,
          top: e.pageY + 30
        });
      }

		});

		$('.view-tury.view-display-id-page_1 .views-col').mouseleave(function() {
			$("#follower").remove(); 
			tempTriger = 0
		});

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

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

var tempTriger = 0;
    var TimerInterval;

		$('.view-tury.view-display-id-page_1 .views-col').mousemove(function(e) {

			var tempThis = $(this);
      TimerInterval = setTimeout(function(){

			if (tempTriger == 0) {
				$("#main").append('<div id="follower">' + $(tempThis).html() + '</div>');
				$('#follower').show();
				tempTriger = 1
			}

      var tempLeft = e.pageX + 325;
      if ( $(window).width() > tempLeft ) {
        $('#follower').offset({
          left: e.pageX + 20,
          top: e.pageY + 30
        });
      } else {
        $('#follower').offset({
          left: e.pageX - 300,
          top: e.pageY + 30
        });
      }

		}, 500);

		});

		$('.view-tury.view-display-id-page_1 .views-col').mouseleave(function() {
			$("#follower").remove(); 
			tempTriger = 0
      clearTimeout(TimerInterval);
		});

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

alecto,
лучше бы минимальный макет полностью