Не работает clearInterval в javascript?

Question

[cedFlame]

Есть функцию которая у одинаковых блоков с разными айди меняет прозрачность а затем удаляет. Всё это произходит с интервалом, но когда блоки заканчиваются инкримент продолжает расти, а clearInterval не работает.
Вот код:

var id
var j = 1
function remove(){
id = setInterval(function () {
                $('.i-am-os[data-id="' + j + '"]').animate({
                    opacity: '0',
                    color: '#00000000'
                }, 100, function () {
                    $(this).remove()
                })
                j++
            }, 100);
            if(j>22){
                clearInterval(id);
            }
}

Comments

[Lapita12]

Проблема в том, что переменная id не объявляется внутри функции remove() и не передается в функцию clearInterval(), поэтому clearInterval(id) не срабатывает. Также, если j станет больше 22, то функция remove() может быть вызвана повторно, и снова будет создан новый интервал, который может перекрыть старый.

Вот исправленный код:

var j = 1;
var id = setInterval(remove, 100); 

function remove() { 
    $('.i-am-os[data-id="' + j + '"]').animate({ 
        opacity: '0', 
        color: '#00000000' 
    }, 100, function () { 
        $(this).remove() 
    }); 
    j++; 
    if (j > 22) { 
        clearInterval(id); 
    } 
}

В этом коде переменная id объявляется сразу после переменной j и устанавливается интервал вызова функции remove() с интервалом в 100 миллисекунд. Внутри функции remove(), перед вызовом clearInterval(id), проверяется значение переменной j. Если j больше 22, то остановка интервала происходит.

[cedFlame]

Lapita12,
Спасибо огромное, но я дурак, не полностью скинул код, следственно не так описал проблему. На самом деле у меня есть скрипт который при наведении курсора на текст генерирует множество элементов и расставляет их по нужным местам, а при отведении курсора от текста плавно удаляет все элементы. Проблема в том что этот скрипт работает только один раз.
Вот код:

<script>
        var id
        let j = 1
        $('.main-i').hover(function () {
            $(document).ready(function () {
                let a = $('.main-i').offset()
                for (i = 1; i <= 9; i++) {
                    $('.pc-spans').append('<span data-class="span-i" data-id=' +
                        i + ' class="i-am-os">text</span>')
                    $('.i-am-os[data-id="' + i + '"]').offset({ top: a.top + i * 13, left: a.left + i ** 2 })
                }
                $('.pc-spans').append('<span data-class="span-i" data-id=' +
                    10 + ' class="i-am-os">text</span>')
                $('.i-am-os[data-id="' + 10 + '"]').offset({ top: a.top + 10 * 13, left: a.left + 50 + 10 ** 2 })
                for (i = 11; i <= 22; i++) {

                    $('.pc-spans').append('<span data-class="span-i" data-id=' +
                        i + ' class="i-am-os">text</span>')
                    $('.i-am-os[data-id="' + i + '"]').offset({ top: a.top - (i - 20) * 13, left: a.left - (i - 22) ** 2 + 360 })

                }
            })
        }, function () {
            id = setInterval(function () {
                $('.i-am-os[data-id="' + j + '"]').animate({
                    opacity: '0',
                    olor: '#00000000'
                }, 100, function () {
                    $(this).remove()
                    console.log(j)
                })
                if (j > 22) {
                    clearInterval(id);
                } else {
                    j++
                }
            }, 100);
        })

    </script>

Answer 1

[Teleweb developer]

var id
var j = 1
function remove(){
id = setInterval(function () {
          $('.i-am-os[data-id="' + j + '"]').animate({
                 opacity: '0',
                 olor: '#00000000'
           }, 100, function () {
                 $(this).remove()
            })
            if(j>6){
                clearInterval(id);
            } else {
                j++
            }
  }, 1000);
}
remove()

Так будет работать))

Comments

[cedFlame]

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

<script>
        var id
        let j = 1
        $('.main-i').hover(function () {
            $(document).ready(function () {
                let a = $('.main-i').offset()
                for (i = 1; i <= 9; i++) {
                    $('.pc-spans').append('<span data-class="span-i" data-id=' +
                        i + ' class="i-am-os">text</span>')
                    $('.i-am-os[data-id="' + i + '"]').offset({ top: a.top + i * 13, left: a.left + i ** 2 })
                }
                $('.pc-spans').append('<span data-class="span-i" data-id=' +
                    10 + ' class="i-am-os">text</span>')
                $('.i-am-os[data-id="' + 10 + '"]').offset({ top: a.top + 10 * 13, left: a.left + 50 + 10 ** 2 })
                for (i = 11; i <= 22; i++) {

                    $('.pc-spans').append('<span data-class="span-i" data-id=' +
                        i + ' class="i-am-os">text</span>')
                    $('.i-am-os[data-id="' + i + '"]').offset({ top: a.top - (i - 20) * 13, left: a.left - (i - 22) ** 2 + 360 })

                }
            })
        }, function () {
            id = setInterval(function () {
                $('.i-am-os[data-id="' + j + '"]').animate({
                    opacity: '0',
                    olor: '#00000000'
                }, 100, function () {
                    $(this).remove()
                    console.log(j)
                })
                if (j > 22) {
                    clearInterval(id);
                } else {
                    j++
                }
            }, 100);
        })

    </script>

Answer 2

[zkrvndm]

Любите же вы сложные методы. Здесь в принципе не нужен setInterval:

(async function() {
	
	var els = $('.i-am-os[data-id]');
	
	for (var n = 0; n < els.length; n++) {
		
		await els[n].animate({ opacity: '0', color: '#00000000' }, 1000).promise();
		
		els[n].remove();
		
	}
	
})();