javascript在下一个动画之前等待动画完成

Question

我正在制作一个powerpoint类型的网页，其中幻灯片以各种动画滑入和查看。动画序列保存在一个数组中(最终从数据库加载)，并使用 eval() 进行调用

单击幻灯片时，将执行下一组动画，但我需要每个动画都等到前一组动画完成。因此，对于下面的代码，当 SeqNo 为 1 时，我希望 ShowSlideLeft 等待，直到 HideSlideRight 完成。

我已经查看了回调和 promise ，但我无法让它们工作，因为我无法对链接事件进行硬编码。

var SeqNo;

$(document).ready(function () {
    $('.slide').click(function (e) {
        ActivateSequence(++SeqNo);
    });

    SeqNo = 0;

    SetupSequence();

    ActivateSequence(SeqNo);
});

function SetupSequence() {
    Sequence = [];

    Sequence[0] = [];
    Sequence[0][0] = "ShowSlideLeft('S1');";

    Sequence[1] = [];
    Sequence[1][0] = "HideSlideRight('S1');";
    Sequence[1][1] = "ShowSlideLeft('S2');";
}  

function ActivateSequence(Seq) {
    var action;
    var element;

    if (Seq < Sequence.length) {
        for (var i = 0; i < Sequence[Seq].length; i++) {
            eval(Sequence[Seq][i]);
        }
    }
}

function ShowSlideLeft(div) {
    var showoptions = { "direction": "left", "mode": "show" };
    $('#' + div).effect("slide", showoptions, 1000);
}

function ShowSlideRight(div) {
    var showoptions = { "direction": "right", "mode": "show" };
    $('#' + div).effect("slide", showoptions, 1000);
}

function HideSlideLeft(div) {
    var showoptions = { "direction": "left", "mode": "hide" };
    $('#' + div).effect("slide", showoptions, 1000);
}

function HideSlideRight(div) {
    var showoptions = { "direction": "right", "mode": "hide" };
    $('#' + div).effect("slide", showoptions, 1000);
}

非常感谢您提供的任何帮助。

Answer 1

您可以向 .effect() 传递第四个参数回调，该回调是动画完成后要调用的函数。 因此，您可以通过添加回调参数并将其传递给 .effect 调用来更改自定义函数，如下所示:

function ShowSlideLeft(div, callback) {
    var showoptions = { "direction": "left", "mode": "show" };
    $('#' + div).effect("slide", showoptions, 1000, callback);
}

您还需要更改 SetupSequence 和 ActivateSequence，我建议您:

• 将 eval 替换为 window[function_name] 以实现实际的函数调用
• 使用对象而不是字符串初始化 Sequence 数组(它们可以作为 JSON 字符串存储在数据库中，因此此更改不应影响数据库设计)

结果会是这样的:

function SetupSequence() {
    Sequence = [];

    Sequence[0] = [];
    Sequence[0][0] = { action: 'ShowSlideLeft', target: 'S1' };

    Sequence[1] = [];
    Sequence[1][0] = { action: 'HideSlideRight', target: 'S1' };
    Sequence[1][1] = { action: 'ShowSlideLeft', target: 'S2' };
}  

和

function ActivateSequence(Seq, Step) {
    if (Seq < Sequence.length) {
        (window[Sequence[Seq][Step].action])(Sequence[Seq][Step].target, function() {
            // when the first effect is complete, execute the next one
            ActivateSequence(Seq, Step + 1);
        });
    }
}

请注意，通过稍加修改，您还可以将参数数组传递给自定义效果函数，而不是像现在这样的单个参数target。

当然，您需要在 click 处理程序中使用 ActivateSequence(SeqNo, 0) 调用 ActivateSequence。