老师想请问下clearInterval加在那个数数字的题目前面的话可以让多次点击加速无效

但是为什么加在盒子上的话多次点击却不能起到效果呢请问这是clearInterval定义问题吗谢谢老师

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

#two {

height: 100px;

width: 100px;

position: absolute;

left: 100px;

top: 100px;

background-color: orange;

}

</style>

</head>

<body>

var one=document.getElementById('one');

var two=document.getElementById('two');

one.onclick=function(){

clearInterval(timer);

var left=100;

var timer;

timer= setInterval(function(){

left+=2;

two.style.left=left+'px';

if(left>1000)

{

clearInterval(timer);

}

},10);

}

</script>

</body>

</html>

源自：DOM 5-3 使用定时器实现动画

收起

1回答

好帮手慕久久 2022-07-28 10:51:59

同学你好，代码逻辑存在问题。变量left的声明是写在点击事件中的，每点击一次，都会重新声明一个left变量，并赋值为100px：

即：重复多次点击按钮，left会重置，导致短时间内left的值无法满足if语句，从而代码不会执行clearInterval(timer)，因此无法解决多次点击加速问题：

建议将left、timer的声明语句，写在点击事件外面，保证代码中，始终操作同一个left和timer：

祝学习愉快！

提问者慕仙0240544 #1

老师还想请问下可以把setinterval里面的函数理解成死循环吗

2022-07-28 11:02:24
好帮手慕久久回复提问者慕仙0240544 #2

不算死循环。同学的写法，每点击一次按钮，就会重新生成一个定时器、一个left值，当前的定时器和left值是绑定的；短时间内多次点击，就会造成同时存在多个定时器，定时器叠加，运动会加速（多个运行中的定时器+新生成的定时器）。但是，每一个定时器都是独立的，处于运行中的定时器对应的left值其实是不断增加的，它的left值可以到达1000；当到达1000，这个定时器就会被清除，所以不是死循环。

2022-07-28 11:20:23