ClearTimeout на нескольких setTimeout
У меня есть несколько функций setTimeout, например:
function bigtomedium(visiblespan) {
visiblespan.removeClass('big').addClass('medium');
setTimeout(function(){ mediumtosmall(visiblespan);},150);
};
function mediumtosmall(visiblespan) {
visiblespan.removeClass('medium').addClass('small');
setTimeout(function() { smalltomedium(visiblespan); },150);
};
function smalltomedium(visiblespan) {
visiblespan.removeClass('small').addClass('medium');
setTimeout(function() { mediumtobig(visiblespan); },150);
};
function mediumtobig(visiblespan) {
visiblespan.removeClass('medium').addClass('big');
setTimeout(function() { bigtomedium(visiblespan); },150);
};
Что активируется в jquery onclick:
$('div.click').click(
function(event) {
var visiblespan = $('span:visible');
mediumtosmall(visiblespan);
}
);
Что мне нужно сделать, так это получить щелчок, чтобы скрыть невидимый промежуток.
$('div.click').click(
function(event) {
var visiblespan = $('span:visible');
var invisiblespan = $('span:not(:visible)');
mediumtosmall(visiblespan);
clearTimeout(invisiblespan);
}
);
Я не уверен, как это сделать, так это написать функцию clearTimeout, которая остановит цикл. Любая помощь приветствуется. Спасибо.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 5
Не уверен, что вы уже знаете об этом, но clearTimeout принимает timeoutID, который ранее был возвращен из вызова setTimeout.
Поэтому вам нужно присвоить этот идентификатор тайм-аута переменной, которая остается в области видимости, когда вам нужно отменить его. Затем передайте его вызову clearTimeout, когда вам нужно остановить цикл.
Поскольку это просто целочисленный идентификатор, другим вариантом может быть создание настраиваемого атрибута в элементе dom, используя что-то вроде «domElement.setAttribute ('timoutIDFirst');» (или attr в jQuery), а затем просто получить его, используя getAttribute, когда это необходимо.
Учитывая, что у вас есть несколько таймеров, использование настраиваемых атрибутов в элементах DOM может помочь сохранить порядок.
НАПРИМЕР:
function mediumtosmall(visiblespan) {
vt.removeClass('medium').addClass('small');
// Store the timeoutID for this timer
var storedTimeoutID=setTimeout(function() { smalltomedium(visiblespan); },150);
$('span:visible').attr('timeoutID',storedTimeoutID);
};
а потом:
$('div.click').click(
function(event) {
var visiblespan = $('span:visible');
var invisiblespan = $('span:visible');
mediumtosmall(visiblespan);
var storedTimeoutID=invisibleSpan.attr('timeoutID');
// Pass the ID to clearTimeout
clearTimeout(storedTimeoutID);
}
);
Вероятно, лучший способ справиться с этим - использовать setInterval () вместо setTimeout. Как и setTimeout, setInterval возвращает целое число, которое можно передать в clearInterval (), чтобы отменить обработку.
пример будет (предупреждение, я это вообще не тестировал):
function animateSizes( jQueryElement ) {
if ( jQueryElement.hasClass("big")
jQueryElement.removeClass("big").addClass("medium");
else if ( jQueryElement.hasClass("medium") )
jQueryElement.removeClass("medium").addClass("small");
else if ( jQueryElement.hasClass("small") )
jQueryElement.removeClass("small").addClass("smaller");
else
jQueryElement.removeClass("smaller").addClass("big");
}
function startAnimation( elem ) {
var sizeAnimation = window.setInterval( function() {animateSizes( elem )}, 150);
elem.attr( "sizeAnimation", sizeAnimation );
}
function stopAnimation( elem ) {
var sizeAnimation = elem.attr("sizeAnimation");
window.clearTimeout( sizeAnimation );
}
Вы смотрели очередь jQuery? Я не использовал его, но, похоже, он предназначен для того, что вы делаете.
Это простой способ использования и сброса нескольких тайм-аутов. это простой трюк, просто скопируйте и вставьте
$(document).ready(function(){
$('body').append("<div id='clear1' style='width:45px; height:25px; background-color:#999; margin-left:20px; float:left; cursor:pointer; padding:3px 0px 0px 3px;'>Stop 1</div><div id='clear2' style='width:45px; height:25px; background-color:#999; margin-left:20px; float:left; cursor:pointer; padding:3px 0px 0px 3px;'>Stop 2</div><div id='clear3' style='width:305px; height:25px; background-color:#999; margin-left:20px; float:left; cursor:pointer; padding:3px 0px 0px 3px;'>Stop 3 Timer and change massage 'Thanks'</div>");
var time1,time2,time3;
time1f();
time2f();
time3f('It is a 3st timer');
function time1f(){
alert("It is a 1st timer");
time1=setTimeout(time1f,4000);
}
function time2f(){
alert("It is a 2st timer");
time2=setTimeout(time2f,5000);
}
function time3f(str){
alert(str);
time3=setTimeout(time3f,6000,str);
}
function stoptimer(){
clearTimeout(time1);
}
function stoptimer2(){
clearTimeout(time2);
}
function stoptimer3(){
clearTimeout(time3);
}
$('#clear1').click(function(){
stoptimer();
});
$('#clear2').click(function(){
stoptimer2();
});
$('#clear3').click(function(){
stoptimer3();
time3f('Thanks');
});
Почему бы не сделать так, чтобы объект затем перебирал этот объект и не очищал таймауты? Как это:
// Make an object
let timeouts = {}
// Then assign them
timeouts.a = setTimeout(() => func1(), 100)
timeouts.b = setTimeout(() => func2(), 100)
timeouts.c = setTimeout(() => func3(), 100)
// To clear them all
Object.keys(timeouts).map(e => clearTimeout(timeouts[e]))