Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.05.2016, 23:44
Аспирант
Отправить личное сообщение для alecto Посмотреть профиль Найти все сообщения от alecto
 
Регистрация: 12.11.2014
Сообщений: 84

Помогите разобраться с 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);
	})



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

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

Спасибо
Ответить с цитированием
  #2 (permalink)  
Старый 31.05.2016, 23:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

alecto,
вопрос почему никогда не сработает строка 14?
Ответить с цитированием
  #3 (permalink)  
Старый 31.05.2016, 23:59
Аспирант
Отправить личное сообщение для alecto Посмотреть профиль Найти все сообщения от alecto
 
Регистрация: 12.11.2014
Сообщений: 84

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

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

насколько будет корректен код без испольщования вара?
Ответить с цитированием
  #4 (permalink)  
Старый 01.06.2016, 00:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

alecto,
что мешает обьявить переменную в строке ноль
Ответить с цитированием
  #5 (permalink)  
Старый 01.06.2016, 00:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

alecto,
Срабатывание события при условии
Ответить с цитированием
  #6 (permalink)  
Старый 01.06.2016, 00:09
Аспирант
Отправить личное сообщение для alecto Посмотреть профиль Найти все сообщения от alecto
 
Регистрация: 12.11.2014
Сообщений: 84

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

сделал так:
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);
	})


вроде работает.
спасибо.
Ответить с цитированием
  #7 (permalink)  
Старый 01.06.2016, 00:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

Сообщение от alecto
сделал так:
ок
Ответить с цитированием
  #8 (permalink)  
Старый 01.06.2016, 11:21
Аспирант
Отправить личное сообщение для Alex_63 Посмотреть профиль Найти все сообщения от Alex_63
 
Регистрация: 22.08.2015
Сообщений: 71

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');
});
Ответить с цитированием
  #9 (permalink)  
Старый 29.06.2016, 14:39
Аспирант
Отправить личное сообщение для alecto Посмотреть профиль Найти все сообщения от alecto
 
Регистрация: 12.11.2014
Сообщений: 84

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

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, 29.06.2016 в 15:42.
Ответить с цитированием
  #10 (permalink)  
Старый 29.06.2016, 15:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
помогите разобраться с this uroboros7 jQuery 4 02.01.2015 00:56
Помогите разобраться с калькулятором Maksim858 Ваши сайты и скрипты 1 27.12.2014 13:23
Получение ответа сервера через iframe и xhr. Помогите разобраться. Arconas AJAX и COMET 0 26.02.2013 10:38
Помогите начинающему разобраться с setTimeout Rain Events/DOM/Window 6 09.08.2011 21:18
Помогите разобраться с галереей IMAGIN yana_studio Общие вопросы Javascript 4 12.12.2009 17:24