当我在setInterval内使用animate函数时，有一个奇怪的行为，我不明白。
下面是代码://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;
}
image.animate({ left: '+=' + 10 * direction }, 20);
}, 100);
} else if (input.val() === 'Stop') {
input.val('Animate');
clearInterval(interv);
image.stop();
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!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>看任务2，动画按钮开始间隔，图像将移动，直到它达到div的结束，然后向后移动。动画按钮(现在是停止)，当再次点击停止间隔。此时代码运行正常。
如果将动画的时间更改为1毫秒，将设置的间隔时间更改为3毫秒，则代码会崩溃。这很奇怪，因为逻辑甚至没有改变。
谁能解释一下这个行为或者告诉我我应该在哪里搜索这个
间隔计时搞砸了。在我的回答中，我使用动画的完整功能替换了Interval。在该函数中，我检查当前位置，以确定滑动函数是否应该再次运行或切换以使其返回。
function slideLeft(target) {
target.animate({left: "-=10"}, 100, "swing", () => {
if(target.position().left == 0){slideRight(target)}
else{slideLeft(target)}
});
}
function slideRight(target) {
let maxRight = target.parent().width() - target.width();
target.animate({left: "+=10"}, 100, "swing", () => {
if(target.position().left >= maxRight){slideLeft(target)}
else{slideRight(target)}
});
}
let interv;
var direction = 1;
$('input:eq(1)').click(function () {
let input = $(this);
var image = $('img');
if (input.val() === 'Animate') {
input.val('Stop');
slideRight(image);
} else if (input.val() === 'Stop') {
input.val('Animate');
image.stop();
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!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>