установить / очистить интервал выдачи - PullRequest
Новая
       9

установить / очистить интервал выдачи

1 голос
/ 27 апреля 2010

HI

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

var showTimeOut;
var thisElement

$('.user-list li').live('mouseover',function(){

    thisElement = $(this).children('a.copier-link');

    showTimeOut = setInterval(function(){
        thisElement.css({'display':'block'});
    },3000);
})

$('.user-list li').live('mouseleave',function(){
    clearInterval(showTimeOut);
    thisElement.hide();
})

Работает нормально. Но проблема в том, что хотя я пересекаю элемент li всего за секунду, даже интервал вызывает и показывает ссылку. но мне нужно показать только, если я остаюсь внутри 3сек, и после этого мне нужно спрятаться там, снова я остаюсь 3сек.

что-то не так с моим кодом? Кто-нибудь еще даст мне лучшее предложение?

Спасибо.

Ответы [ 2 ]

1 голос
/ 27 апреля 2010

Это только предположение, но это может быть связано с использованием mouseover вместо mouseenter. mouseover может запускаться несколько раз, если в элементе li есть дочерние элементы, которые устанавливают интервал несколько раз и перезаписывают значение переменной showTimeout. Это означает, что при срабатывании mouseleave сбрасывается только последний установленный интервал.

Попробуйте вместо этого изменить событие mouseover на mouseenter. Я также хотел бы рассмотреть возможность изменения setInterval на setTimeout, так как setInterval установит таймер для запуска функции, повторяющейся каждые 3 секунды, без необходимости повторного применения .css(). setTimeout вызовет функцию только один раз.

<Ч />

Другая идея - всегда звонить clearTimeout до setTimeout, тогда вы знаете, что два таймера не могут работать одновременно: 

clearTimeout(showTimeout);
showTimeOut = setTimeout(function(){
    thisElement.css({'display':'block'});
},3000);
0 голосов
/ 27 апреля 2010

Может быть, плагин hoverIntent jQuery - это то, что вы ищете?

hoverIntent - плагин, который пытается определить намерение пользователя ... как хрустальный шар, только движением мыши!Он работает как (и был получен из) встроенного наведения jQuery.Однако вместо немедленного вызова функции onMouseOver она ждет, пока мышь пользователя не замедлится достаточно, прежде чем сделать вызов.

...