Как остановить кастомное задание в очереди jQuery с setInterval() внутри?

Question

[coderlex]

Есть эффект в очереди jQuery. В его callback'е используется setInterval для анимации.

Через некоторое время вызывается stop(). Это удаляет callback текущего запущенного эффектa из очереди и запускает следующий.

Но setInterval() в предыдущем эффекте всё ещё работает. Куда поместить clearInterval() чтобы он вызывался по завершению задачи с помощью stop()?

Возможно, есть какой-то другой путь?

Вот пример:

$('body')
	.queue(function(next) {
		var i = 0, el = this;
		var interval = setInterval(function() {
			el.style.backgroundColor = i++ % 2 == 0 ? '#500' : '#050';
			if (i > 5) {
				clearInterval(interval);
				next();
			}
		}, 1000);
	})
	.queue(function() {
		this.style.backgroundColor = '#005';
	});

setTimeout(function() {
	$('body').stop();
}, 1500);

https://jsfiddle.net/coderlex/tLd9xtjj/

Answer 1

[coderlex]

Не уверен насчет поддержки этого метода, но, порывшись в исходниках, нашел недокументированный второй аргумент в колбек функции задания. Это объект для прикрепления хуков. Нужный нам называется соответственно "stop". Он вызывается только при "ручной" остановке текущей анимации методами stop() и finish(). При очистке или замене очереди колбек вызван не будет.

Обновил код на jsfiddle.

Answer 2

[Алексей Шашенков]

Как вариант вынести выше переменную таймера

Comments

[coderlex]

Тогда если клиентский код, использующий мой плагин, вызовет stop(), совершенно не подозревая о необходимости каких-то специальных манипуляций при этом, всё сломается.

[Алексей Шашенков]

А если так

[coderlex]

В очередь могут добавляться задания асинхронно. Например, по клику на баттон пользователем или по таймеру. Поэтому если длина сохранилась той же, что и была при начале эффекта, это не обязательно значит, что текущее задание не было удалено. Например, можно выполнить последовательно stop().queue(/* */), это удалит первое задание, но колбек будет думать, что оно ещё запущено, т.к. длина осталась той же.