Question

在我的演示功能中，我有一个淡出功能。此功能通过淡化图像来为图像设置动画，并运行几秒钟。

我想要在完成此淡入淡出后才能运行警报。。这不是这样的。在淡入淡出完成之前警报弹出。

有没有办法对每个函数的运行时间进行排序，并为每个命令创建相应的setTimeout？

演示功能：

function Demo() {
    fadeout(liran0);
    alert("hello");
}

分析需要淡出功能

function fadeout(element) {
    var op = 1; // initial opacity
    var timer = setInterval(function () { //call the function every x milliseconds
        if (op <= 0.01) { // stop the function when the op is lower then 0.1 and then make in invisible.
            element.style.opacity = 0; // make it invisible
            clearInterval(timer); // clear the timer ....
            return true;
        }
        element.style.opacity = op;
        op -= 0.01;
    }, 10);
}

Answer 1

您在开始动画后立即调用alert，这是异步发生的。而是这样做：

function fadeout(element, finished) {
    var op = 1; // initial opacity
    var timer = setInterval(function() { //call the function every x milliseconds
        if (op <= 0.01) { // stop the function when the op is lower then 0.1 and then make in invisible.
            element.style.opacity = 0; // make it invisible
            clearInterval(timer); // clear the timer ....
            if (typeof finished === "function") {
                finished();
            }
            return true;
        }
        element.style.opacity = op;
        op -= 0.01;
    }, 10);
}

fadeout(liran0, function() {
    alert("hello");
});

在动画完成之前，不会执行对fadeout的回调。

Answer 2

如果你看一下jQuery库的作用，你会发现它们总是提供一个回调函数，当动画完成运行时会调用它。例如，查看slideUp() method。它的第二个参数采用一个在完成后调用的回调。

所以，这里的方法是在clearInterval()调用之后调用你的回调，就像这样。

function fadeout(element, complete) {
    var op = 1; // initial opacity
    var timer = setInterval(function () { 
        //call the function every x milliseconds
        if (op <= 0.01) { // stop the function when the 
                          // op is lower then 0.1 and then make in invisible.
            element.style.opacity = 0; // make it invisible
            clearInterval(timer); // clear the timer ....
            if ( typeof complete === 'function' ) {
                complete();
            }
            return true;
        }
        element.style.opacity = op;
        op -= 0.01;
    }, 10);
}

javascript中命令的排序顺序

2 个答案: