setInterval на событие click для запуска в течение 10 секунд

Question

У меня есть часть JavaScript. Я хочу запускать каждые 100 мс в течение 10 секунд, когда пользователь нажимает на элемент на странице.

У меня есть работа в некоторой степени, но если пользователи нажимают на элемент во второй раз, это не длится долго.

Любая помощь будет действительно оценена.

КОД

jQuery('.pager .pages li, .pager .pages li a').click(function(){ 
    var safariClearFixTimer = setInterval(safariClearFix ,100); 
    setTimeout(function() { clearInterval(safariClearFixTimer); }, 10000); 
    function safariClearFix(){ 
     jQuery('.itemgrid-3cols .item').css('cssText', 'clear: none !important;'); 
     console.log('COUNT'); 
    } 
}); 

Answer 1

Может очистить интервала каждый раз, когда элемент щелкнул перед установкой его? Что-то вроде этого:

var safariClearFixTimer; 
var timer; 
jQuery('.pager .pages li, .pager .pages li a').click(function(){ 
    clearInterval(safariClearFixTimer); 
    clearTimeout(timer); 
    safariClearFixTimer = setInterval(safariClearFix ,100); 
    timer = setTimeout(function() { clearInterval(safariClearFixTimer); }, 10000); 
    function safariClearFix(){ 
     jQuery('.itemgrid-3cols .item').css('cssText', 'clear: none !important;'); 
     console.log('COUNT'); 
    } 
}); 

[править] Кстати, вы также должны очистить таймаут щелчка мыши или вы, вероятно, будет иметь какое-то неожиданное поведение. [edit2] Добавлено clearTimeout в вышеприведенном

Answer 2

кода Вам необходимо отключить кнопку, когда вы начинаете интервал и включите его снова, когда вы очистить его. Попробуйте это JSBIN

Для вашего приложения было бы также полезно изменить кнопку css, чтобы пользователь знал, что он отключен.

Answer 3

Я не мог заставить setInterval работать, поэтому решил его с помощью другого подхода.

Я использовал событие javaScript DOMSubtreeModified, чтобы применить свои изменения к изменениям в DOM.

jQuery('body.catalog-category-view .main.container .col-main, body.catalogsearch-result-index .main.container .col-main').on("DOMSubtreeModified",function(){ 
     jQuery('.itemgrid-3cols .item').css('cssText', 'clear: none !important;'); 
    });