使用模态库从嵌套的异步调用中制作javascript同步代码？

Question

因此，这可能有点令人困惑。 早在Chromium决定取消其模式支持时，我们所在的地方发现了一个似乎运行良好的库（是的，他们希望在webkit / non-webkit之间进行解析[基本上，在这两个Firefox中都可以运行此东西的两个版本或Chrome]）

function AddToConfig(){
....
....
....

if(/ipad|android|webkit/i.test(navigator.userAgent)){
    $.showModalDialog({
    url: "get_required.php?maxSelect="+max+"&forceReload="+Math.random(),
    dialogArguments: window,
    height: 270,
    width: 510,
    position: 'top',
    onClose: function(){ numReq = this.returnValue; return retAction(numReq); }
    });
}else{
    numReq = window.showModalDialog ("get_required.php?maxSelect="+max+"&forceReload="+Math.random(),             window, "dialogHeight:250px; dialogWidth:500px; center:yes; help:no; resizable:no; scroll:no; status:no; edge:raised");
    return numReq;
}

（此处提供了举升/更多信息） http://extremedev.blogspot.com/2011/03/windowshowmodaldialog-cross-browser-new.html

有一阵子，它工作正常。 到目前为止，所有代码替换都是在用户单击按钮，弹出窗口（现在是模式窗口）的情况下发生的，它会执行其操作并返回一个值，该值表示99％的时间需要iFrame或刷新某些内容，因此计时不是问题。 太好了

我现在所处的情况是，此模态调用处于其他一系列计算的中间。 如果它到达ifthens链，它将触发。 但是，上面的代码似乎使它成为问题。 我已经尝试过像下面这样的回调（也许我只是在写错它们）而没有用。 地狱，上面URL中的注释说这样做有点棘手。 这有点（我希望）就足够了。 因此，我想点击AddToConfig（），ClearSelections（），printText（）本身似乎很简单，但是GetRequired的yy-y调用使所有操作都无法进行。

有问题的主要代码（原始）：

//What kicks it off
<input type=button class="button3" id=btnAdd onClick='AddToConfig()' value='Add' onMouseDown="this.className='button3down'" onMouseUp="this.className='button3over'" onMouseOver="this.className='button3over'" onMouseOut="this.className='button3'">

  function AddToConfig(){   
    ....
    ...
    if (meowmeowmeowmeow)
    {
       ....
    }
    else
    {
        //Modal - NEEDS TO PAUSE
        var requiredCount = GetRequired(arrConfigSet[--lenS][2]);
        //Modal - NEEDS TO PAUSE

        arrConfigSet[lenS][1] = requiredCount;
        arrConfigSet[lenS][2]++;
    }

    arrConfigItem[lenI] = new Array ();
    ...
    ...
    ClearSelections();
}

 function GetRequired(max)
 {
        //This is modal and dumb and makes me cry

        var numReq = '';

    if(/ipad|android|webkit/i.test(navigator.userAgent)){
        $.showModalDialog({
        url: "get_required.php?maxSelect="+max+"&forceReload="+Math.random(),
        dialogArguments: window,
        height: 270,
        width: 510,
        position: 'top',
        onClose: function(){ numReq = this.returnValue; return numReq; }
    });
}else{
    //This is fine, because it pops up a new window.
    numReq = window.showModalDialog ("get_required.php?maxSelect="+max+"&forceReload="+Math.random(),             window, "dialogHeight:250px; dialogWidth:500px; center:yes; help:no; resizable:no; scroll:no; status:no; edge:raised");
        return numReq;
    }
}

function ClearSelections(){
    //various UI resetting of values
    printText(); 
}

有问题的主要代码（我的回调版本）：

<input type=button class="button3" id=btnAdd onClick='AddToConfig(function(){ClearSelections();})' value='Add' onMouseDown="this.className='button3down'" onMouseUp="this.className='button3over'" onMouseOver="this.className='button3over'" onMouseOut="this.className='button3'">

if (meowmeowmeowmeow)
{
   ....
}
else
{
var requiredCount = GetRequired(arrConfigSet[--lenS][2]);

//So, here's my problem, that line above works fine with Firefox/non webkit because 
    //Popup windows make things work fine and great. With this modal thing we found
    //on the internet (in getRequired()) this line of code keeps going and runs stuff below
    // the line and keeps going. I need this to 
    //stop here. I've tried to do something like put that requiredCount in a while loop, but
    //then it says Uncaught TypeError: Cannot read property '2' of undefined on that var requiredCount.
    //For the record, this is all done from a onClick event on a button if it makes a difference.
    //
    //
    //alert('test:' + arrConfigSet[--lenS][2]);  //Returns a value!
    //      var requiredCount;
    //      while(typeof variable_here === 'undefined'){
    //          requiredCount = GetRequired(arrConfigSet[--lenS][2]);
    //      }


    //This keeps running when in Webkit, I need that requiredCount to be set and finalized with
    //the modal window gone before this continues.

    arrConfigSet[lenS][1] = requiredCount;
    arrConfigSet[lenS][2]++;
}

arrConfigItem[lenI] = new Array ();
...
...
callback();
}

 function GetRequired(max)
 {
        //This is modal and dumb and makes me cry

        var numReq = '';

    if(/ipad|android|webkit/i.test(navigator.userAgent)){
        $.showModalDialog({
        url: "get_required.php?maxSelect="+max+"&forceReload="+Math.random(),
        dialogArguments: window,
        height: 270,
        width: 510,
        position: 'top',
        onClose: function(){ numReq = this.returnValue; return numReq; }
    });
}else{
    //This is fine, because it pops up a new window.
    numReq = window.showModalDialog ("get_required.php?maxSelect="+max+"&forceReload="+Math.random(),             window, "dialogHeight:250px; dialogWidth:500px; center:yes; help:no; resizable:no; scroll:no; status:no; edge:raised");
        return numReq;
    }
}

function ClearSelections(){
    //various UI resetting of values
    printText(); 
}

有人对我如何使JS停止运行直到脚本获得该返回值有任何想法吗？ 它可以正常运行，但是到了它运行时，它运行之后的其余代码就可以了。

请注意，我们正在运行jQuery 1.4，所以promise（）不可能了，我也无力推动任何更新。 该代码有点像老鼠的窝。

Answer 1

您可以实现自己的简单延迟库，也可以简单地传入一个在完成所有操作后就会调用的函数。 简单的例子：

var whenDone = function(res) { alert('I\'m Done: ' + res); };

doComplexTask(whenDone);

和doComplexTask：

function doComplexTask(completeFn) {
    //Do some crazy work here that takes a long time (Or is asynchronous)
    var res = crazyWork();
    completeFn(res);
}

在这里可以找到一个简单的jfiddle。