JavaScript如何在单击另一个链接后反转此动画

单击链接时，此动画将开始。在动画结束后，我需要在单击另一个链接后反转此动画。

以下代码允许您启动该过程，并中断该过程以进行反转：

    $('#home').click(doWork);

function doWork() {
        var index = 0;
        var boxes = $('.box1, .box2, .box3, .box4, .box5, .box6');

        function start() {
            boxes.eq(index).addClass('animated');
            ++index;
            setTimeout(start, 80);
        };
        start();
    }

（函数（）{
“严格使用”；
瓦罗克，
指数
盒，
麻木牛，
沃克托；
指数=0；
方框=$（“.box1、.box2、.box3、.box4、.box5、.box6”）；
numBoxes=box.length；
定位销=功能（换碟机，倒档）{
var方向，工人；
clearTimeout（workerTO）；
方向=反向？-1:1；
worker=函数（）{
如果（反向）{
如果（指数<0）{
指数=0；
返回；
}
}否则{
如果（索引>=numBoxes）{
指数=numBoxes-1；
返回；
}
}
控制台日志（索引）；
变换器（盒均衡器（索引））；
指数+=方向；
workerTO=设置超时（worker，80）；
};
工人（）；
};
$（“#主页”）。单击（函数（）{
销钉（功能（el）{
el.addClass（“动画”）；
});
});
$（“#home2”）。单击（函数（）{
销钉（功能（el）{
el.removeClass（“动画”）；
}，对）；
});
}());

演示：

我相信有些东西可以被压缩并变得更高效（比如

if

语句），但这似乎是可读的，并且实现了您想要的

---

跟踪

setTimeout

可中断进程。如果您将超时从80增加到更明显的程度（或者如果您单击的速度足够快），您将看到“动画”可以在中途反转。

您的问题不太清楚。请发布相关的html标记以更好地复制此问题。您可能不应该在

start（）

中使用

setTimeout（start）

。您将有一堆称为递归的

start（）

s.@特洛伊木马程序。

setTimeout

延迟每个调用。怎么了？我的意思是，我想改变一些事情，但主要的一点是，我不知道这是否是你想要的，但伊恩我错了。我把它读作

setInterval

。

(function () {
    "use strict";

    var doWork,
        index,
        boxes,
        numBoxes,
        workerTO;

    index = 0;
    boxes = $(".box1, .box2, .box3, .box4, .box5, .box6");
    numBoxes = boxes.length;
    doWork = function (changer, reverse) {
        var direction, worker;

        clearTimeout(workerTO);

        direction = reverse ? -1 : 1;
        worker = function () {
            if (reverse) {
                if (index < 0) {
                    index = 0;
                    return;
                }
            } else {
                if (index >= numBoxes) {
                    index = numBoxes - 1;
                    return;
                }
            }
            console.log(index);
            changer(boxes.eq(index));
            index += direction;
            workerTO = setTimeout(worker, 80);
        };
        worker();
    };

    $("#home").click(function () {
        doWork(function (el) {
            el.addClass("animated");
        });
    });

    $("#home2").click(function () {
        doWork(function (el) {
            el.removeClass("animated");
        }, true);
    });
}());