JQuery остановка таймаут при наведении курсора мыши на DIV

Question

У меня есть класс:

<ul class="topStatsWrapper"> 
    <li><a href="">link</a></li> 
    <li><a href="">link</a></li> 
    <li><a href="">link</a></li> 
</ul> 

Этот класс уль обновляется каждые 3 сек. Как я могу остановить обновление при мыши в классе ul? Когда мышь уйдет от .topStatsWrapper, тогда запустите настройку снова. Благодарю.

initialize: function() { 
    window.setTimeout(_.bind(this.updateStats, this, true), 3 * 1000); 
}, 

ПОЛНЫЙ КОД http://pastebin.com/nGnfaeN5

Answer 1

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

var timer; // set this globally 

// this is from within your function 
initialize: function() { 
    timer = setTimeout(_.bind(this.updateStats, this, true), 3 * 1000); 
}, 

Затем использовать событие

$(document).on("mouseover", ".myclass", function(){ 
    timer.clearTimeout(); 
}); 

Так использовать setInterval вместо:

var timer; // set this globally 

// this is from within your function 
initialize: function() { 
    timer = setInterval(function(){ ... your code ... }, 3000); 
}, 

Затем использовать событие

$(document).on("mouseover", ".myclass", function(){ 
    timer.clearInterval(); 
}); 

Answer 2

Изменить вашу updateStats функцию на это ..

updateStats: function() { 

    if (window._noUpdate === true) return; 

    var that = this, update; 
    this.showLoading(true); 

    update = $.when(update, 
     that.ajax('getTopics', null, '.newestThreads'), 
     that.ajax('getPosts', {limit: JSON.stringify([0, 3])}, '.newestPosts') 
    ); 

    update.done(function() { 
     that.showLoading(); 
     window.setTimeout(_.bind(that.updateStats, that, true), that.interval * 1000); 
    }); 

} 

и изменить свою initialize функцию это ...

initialize: function() { 
    this.interval = parseInt($('.topStatsWrapper').attr('data-topstats-interval')); 
    window.setTimeout(_.bind(this.updateStats, this, true), 3 * 1000); 
    $("body").on("hover", ".topStatsWrapper", 
     function() { 
      window._noUpdate = true; 
     }, 
     function() { 
      window._noUpdate = false; 
     } 
    }); 
}, 

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