jQuery animate嵌套setInterval时修改时间参数导致崩溃的问题咨询

大家好，我最近在用jQuery做一个图片来回移动的小功能时，遇到了一个特别费解的问题，想过来请教一下各位。

先给大家说下我的需求和当前的实现：Task 2里我做了一个点击按钮控制图片左右移动的功能——点击“Animate”按钮后，通过setInterval定时触发animate方法，让图片在容器里移动，碰到容器边界就切换方向；点击变成“Stop”的按钮后，就停止定时器和动画。原本的代码参数是animate时长20ms，setInterval间隔100ms，这个时候功能完全正常，图片能来回移动，启停也没问题。

但奇怪的是，我只要把animate的时长改成1毫秒，setInterval的间隔改成3毫秒，代码直接就崩溃了！逻辑完全没变化，只是调整了这两个时间参数而已，实在想不通为啥会这样。

有没有大佬能解释下这个现象？或者给我指个排查的方向呀？

下面是我的完整代码：

HTML部分 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JQuery</title>
    <script src="jquery-3.6.4.js"></script>
    <script src="Lab.js" defer></script>
    <style>
        .container1 {
            margin: auto;
            margin-bottom: 100px;
            width: fit-content;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        #div1 {
            border: 2px solid black;
            width: 500px;
            height: 200px;
            display: inline-block;
            margin-bottom: 20px;
        }
        #div2 {
            border: 2px solid black;
            width: 500px;
            height: 200px;
            display: inline-block;
        }
        #div3 {
            border: 2px solid black;
            width: 500px;
            height: 200px;
            display: inline-block;
            position: relative;
        }
        img {
            border: 1px solid black;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="container1">
        <div><h1>Task 1</h1></div>
        <div id="div1">
            <ul>
                <li>OS</li>
                <li>SD</li>
                <li>Java</li>
                <li>Elearning</li>
            </ul>
        </div>
        <div id="div2">
            <ul></ul>
        </div>
        <input
            style="margin-left: 400px; background-color: blueviolet"
            type="button"
            value=">>"
        />
    </div>

    <div class="container1">
        <div><h1>Task 2</h1></div>
        <div id="div3">
            <img
                style="padding-top: 50px"
                src="facebook.png"
                alt=""
                width="100"
                height="100"
            />
        </div>
        <input
            style="margin-left: 50px; background-color: lime"
            type="button"
            value="Animate"
        />
    </div>
</body>
</html>

JS部分（Lab.js） #

//task2
let interv;
var direction = 1;

$('input:eq(1)').click(function () {
    let input = $(this);
    var image = $('img');

    if (input.val() === 'Animate') {
        input.val('Stop');
        interv = setInterval(function () {
            if (image.position().left >= 398) {
                direction = -1;
            } else if (image.position().left <= 0) {
                direction = 1;
            }
            // 问题出在修改这里的时间参数：把20改成1，setInterval的100改成3就会崩溃
            image.animate({ left: '+=' + 10 * direction }, 20);
        }, 100);
    } else if (input.val() === 'Stop') {
        input.val('Animate');
        clearInterval(interv);
        image.stop();
    }
});

备注：内容来源于stack exchange，提问作者KarimMaged