Как заставить clearInterval работать при изменении размера окна в jquery?

Question

Я знаю, что об этом спрашивали много раз, но я все перепробовал и все еще не мог найти выход. После запуска анимации ее нельзя остановить, изменив размер браузера. Какой правильный способ сделать это? Спасибо.

let x;

$(window).on('resize', function() {
    if ($(window).width() >= 980) {
        clearInterval(x);
    } else {
        x = setInterval(animation, 3000);
    }
});

function animation() {
    $('#media-container').delay(3000).animate({
        marginLeft: '-100%',
    }, 500).delay(3000).animate({
        marginLeft: '-200%',
    }, 500).delay(3000).animate({
        marginLeft: 0,
    }, 500);
}

Answer 1

Проблема была решена благодаря .stop (true, true):

setInterval(animation, 3000);

$(window).on('resize', function() {
    if ($(window).width() >= 980) {
        $('#media-container').stop(true, true);
        $('#media-container').animate({
            marginLeft: 0,
        });
        return;
    }
    animation();
})

function animation() {
    if ($(window).width() < 980) {
        $('#media-container').delay(3000).animate({
            marginLeft: '-100%',
        }, 500).delay(3000).animate({
            marginLeft: '-200%',
        }, 500).delay(3000).animate({
            marginLeft: 0,
        }, 500);
    }
}