javascript - javascript中命令的排序顺序

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 的回调直到动画完成才执行。