javascript - 函数为什么没有执行

Question

为了实现一个slidedoor的动画，当鼠标移动到图片上时，当前图片以及左边的图片会向左移动。

但是在浏览器中运行时发现只有当前图片左移，断点调试发现move(it,imgarr[j]);语句只有j是最后一个值的时候才执行一次，其他的j值都跳过move（）函数，并没有从j=1开始遍历执行到最后一个值。请问代码有什么问题？

PHP中文网 · Answer

你的timer变量只有一个，当移动第二个图片时，会把第一个的setInterval取消掉，第三个又会把第二个取消掉……所以只有最后一张图片才会真正地移动。

如果你把for(var j=1;j<=i;j++)改为for(var j=i;j>=1;j--)，也就是倒过来遍历，你会发现反过来了，只有第一张图片才会移动了。原因就是上面所说的。

大概帮你改了一下代码，几个图片可以一起动了，但是你的代码中还有很多问题，耐心点调试调试吧。

把move(it,imgarr[j])这句改为：

var timer = timers[j];
if (timer != null) clearInterval(timer);
timers[j] = move(it,imgarr[j]);

修改timer的定义，名称改为timers，类型定义成数组：var timers=[];
move()函数内部，删除clearInterval这句，然后在timer前加上var：var timer = setInterval...
在move()函数最后返回timer：return timer;

代码太长就不贴了，按上面几步修改一下就能看到结果了。

巴扎黑 · Answer

测试过 move函数是回执行的而且不会跳过，不知道你什么情况 ,你设置的timer 好像也不是像你说的那样左边和当前图片像左移，向左移动的话left值应该是减小而不是增大

伊谢尔伦 · Answer

function move(itarget,box){
            clearInterval(timer);

每次执行move 都会clear timer啦
多次执行move的结果是，只有最后一个setInterval设置的定时器是有效的

Php8, I'm coming too