Executing a function only after another given function has been completely executed

Question

I've got this piece of code, and because of synchronization issues I need to make sure all of this MathJax stuff has been executed before I can run the setConsoleWidth() function. How can I do so? I'd prefer a native solution, but I don't really mind using jQuery.

window.updateConsole = function() {
  MathJax.Hub.Queue(["Rerender",MathJax.Hub,"math"]);
  MathJax.Hub.Queue(function() {
    var math = MathJax.Hub.getAllJax("mathDiv")[0];

    MathJax.Hub.Queue(["Text", math, "R( \\theta ) = sin^{ \\class{hover P}{" + P.show + "} } \\left ( \\frac{\\class{hover B}{" + sign_mult(B.show) + "} ⋅ \\class{hover S}{" + sign_mult(S.show) + "} ⋅ \\class{hover J}{" + sign_mult(J.show) + "} ⋅ \\theta ⋅ ( \\theta \\class{hover S}{" + sign_sum(-(S.show)) + "})}{\\class{hover N}{" + N.show + "}} \\right ) \\;  \\mapsto  \\;  \\left\\{\\begin{array}i x(\\theta) = \\class{hover C}{" + C.show + "} \\class{hover E}{"  + sign_sum(E.show) + "} ⋅ R(\\theta) ⋅ cos^{\\class{hover H}{" + H.show + "}}(\\theta)\\\\y(\\theta) =\\class{hover D}{" + D.show + "} \\class{hover F}{" + sign_sum(F.show) + "} ⋅ R(\\theta) ⋅ sin^{\\class{hover Z}{" + Z.show + "}}(\\theta)\\end{array}\\right."]);
    MathJax.Hub.Queue(setConsoleWidth);
    MathJax.Hub.Queue(console.log(Console.scrollWidth));
  });
};

function setConsoleWidth() {
  MathJax.Hub.Queue(function () {
    var w = Console.scrollWidth, W = window.innerWidth*0.85;

    if (w > W) {
      console.log("bingo");
      math.style.fontSize = (2.8*W/w)+"vw";
    }
 });
}

Answer 1

Just add your console function to the queue at the very end, to ensure it executes only once all the previous actions are completed:

window.updateConsole = function() {
  MathJax.Hub.Queue(["Rerender",MathJax.Hub,"math"]);
  MathJax.Hub.Queue(function() {
    var math = MathJax.Hub.getAllJax("mathDiv")[0];

    MathJax.Hub.Queue(["Text", math, "R( \\theta ) = sin^{ \\class{hover P}{" + P.show + "} } \\left ( \\frac{\\class{hover B}{" + sign_mult(B.show) + "} ⋅ \\class{hover S}{" + sign_mult(S.show) + "} ⋅ \\class{hover J}{" + sign_mult(J.show) + "} ⋅ \\theta ⋅ ( \\theta \\class{hover S}{" + sign_sum(-(S.show)) + "})}{\\class{hover N}{" + N.show + "}} \\right ) \\;  \\mapsto  \\;  \\left\\{\\begin{array}i x(\\theta) = \\class{hover C}{" + C.show + "} \\class{hover E}{"  + sign_sum(E.show) + "} ⋅ R(\\theta) ⋅ cos^{\\class{hover H}{" + H.show + "}}(\\theta)\\\\y(\\theta) =\\class{hover D}{" + D.show + "} \\class{hover F}{" + sign_sum(F.show) + "} ⋅ R(\\theta) ⋅ sin^{\\class{hover Z}{" + Z.show + "}}(\\theta)\\end{array}\\right."]);
    MathJax.Hub.Queue(setConsoleWidth);
  });
};

Answer 2

I think maybe this (assuming that the calls within MathJax.Hub.Queue(function (){} are synchronous) :

window.updateConsole = function () {
    function done() {
        setConsoleWidth();
    }
    MathJax.Hub.Queue(["Rerender", MathJax.Hub, "math"]);
    MathJax.Hub.Queue(function () {
        var math = MathJax.Hub.getAllJax("mathDiv")[0];
        MathJax.Hub.Queue(["Text", math, "R( \\theta ) = sin^{ \\class{hover P}{" + P.show + "} } \\left ( \\frac{\\class{hover B}{" + sign_mult(B.show) + "} ⋅ \\class{hover S}{" + sign_mult(S.show) + "} ⋅ \\class{hover J}{" + sign_mult(J.show) + "} ⋅ \\theta ⋅ ( \\theta \\class{hover S}{" + sign_sum(-(S.show)) + "})}{\\class{hover N}{" + N.show + "}} \\right ) \\;  \\mapsto  \\;  \\left\\{\\begin{array}i x(\\theta) = \\class{hover C}{" + C.show + "} \\class{hover E}{" + sign_sum(E.show) + "} ⋅ R(\\theta) ⋅ cos^{\\class{hover H}{" + H.show + "}}(\\theta)\\\\y(\\theta) =\\class{hover D}{" + D.show + "} \\class{hover F}{" + sign_sum(F.show) + "} ⋅ R(\\theta) ⋅ sin^{\\class{hover Z}{" + Z.show + "}}(\\theta)\\end{array}\\right."]);

        done();
    });
};