JavaScript：如何在继续下一行之前等待函数结束？

Question

我正在使用 JavaScript 为弹出内容制作一些流畅的动画。单击我网站上的按钮时，前景中会出现一个 iframe，其中包含从 html 文件加载的一些内容。

我的淡出动画有问题。我按顺序调用了两个函数，opacityfadeout() 和 resetzindex()。但是，iframe 的 z-index 在淡出发生之前会发生变化。

我需要 resetzindex() 到运行只有在 opacityfadeout() 完全完成后（将 iframe 的不透明度设为 0）。

解决这个简单难题的最简单、最干净的解决方案是什么？

function closecontent()
{
    opacityfadeout();
    resetzindex();
}

function opacityfadeout()
{
    var f = setInterval(function()
    {
        if(opacityvalue > 0.0)
        {
            opacityvalue -= increment;
        }
        else
        {
            clearInterval(f);
        }
        iframe.style.opacity = opacity;

    }, 16);
}

function resetzindex()
{
    iframe.style.zIndex = "-5";
}

Answer 1

将 resetzindex 作为回调参数发送给 opacityfadeout，并在您的间隔结束后调用它。

function closecontent() {
  opacityfadeout(resetzindex);
}

function opacityfadeout(after) {
  var f = setInterval(function() {
    if(opacityvalue > 0.0) {
      opacityvalue -= increment;
    } else {
      clearInterval(f);
      !!after && after();  // if you like compiler love letters...
    }
    iframe.style.opacity = opacity;
  }, 16);
}

function resetzindex() {
  iframe.style.zIndex = "-5";
}

Answer 2

function closecontent()
{
    opacityfadeout(resetzindex);
}

function opacityfadeout(callback)
{
    var f = setInterval(function()
    {
        if(opacityvalue > 0.0)
        {
            opacityvalue -= increment;
        }
        else
        {
            clearInterval(f);
            if (callback) callback()
        }
        iframe.style.opacity = opacity;

    }, 16);
}

function resetzindex()
{
    iframe.style.zIndex = "-5";
}

JavaScript：如何在继续下一行之前等待函数结束？

JavaScript: how do I wait for a function to end before proceeding to next line?

javascript

synchronization