jquery / javascript blur / focus & settimeout

Question

Когда мышь находится над номером продукта (фокус), отобразите некоторую информацию о продукте. Если пользователь больше не набирает номер продукта (размытие), подождите 3 секунды, а затем скройте детали.

$('.productNumber').live('blur', function() {               
    setTimeout(function(){
    var divToPutData = $(this); 
    divToPutData.hide();
}, 3000);
});

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

Answer 1

Использование clearTimeout()

var myTimeout = null;

$('.productNumber').live('mouseover', function() {  
    //If timeout is still active, clear
    if(myTimeout != null)
        clearTimeout(myTimeout);
});

$('.productNumber').live('blur', function() {
    //Store the ID returned by setTimeout
    myTimout = setTimeout(function(){ divToPutData.hide(); }, 3000);
});

Answer 2

Используйте jQuery stop(), чтобы прервать любую текущую анимацию

Проверьте это здесь: http://jsfiddle.net/T7kRr/1/

jQuery

$(".productNumber").hover(
  function () {
      $(this).find(".productDesc:last").stop(true, true).show();
  }, 
  function () {
      $(this).find(".productDesc:last").delay(3000).fadeOut(); 
  }
);

HTML

<div class="productNumber">1001<span class="productDesc" style="display:none">iPhone</span></div>
<div class="productNumber">2001<span class="productDesc" style="display:none">iPad</span></div>
<div class="productNumber">3333<span class="productDesc" style="display:none">TV</span></div>
<div class="productNumber">9999<span class="productDesc" style="display:none">HiFi</span></div>

Answer 3

присваивается переменная setTimeout, поэтому вы можете снова отменить ее при наведении

var hideTimeout;
$('.productNumber').live('blur',function() {
    hideTimeout = setTimeout(function() {
        divToPutData.hide();
    }, 3000);
});
$('.productNumber').live('mouseover',function() {
    clearTimeout(hideTimeout);
    // Do the show stuff
}

• jQuery не мой самый сильный язык, поэтому вам, возможно, придется немного его изменить, но это общий подход к этому сценарию.

Answer 4

var t;
$('.productNumber').live('mouseover', function() {  
    clearTimeout(t);
});

$('.productNumber').live('mouseout', function() {               
    t = setTimeout(function(){
    divToPutData.hide();
}, 3000);
});

Answer 5

Используйте функцию clearTimeout.

setTimeout возвращает числовой идентификатор, вы можете сохранить его в переменной, а затем передать его функции clearTimeout:

var myTimeout = setTimeout ( function(){alert(2);}, 1000);
clearTimeout(myTimeout);