函数运行时显示“请稍候”模式答案

【问题标题】：Show "Please wait" modal while function runs函数运行时显示“请稍候”模式
【发布时间】：2010-07-15 04:17:02
【问题描述】：

我正在尝试添加一个 jQuery UI 模式对话框来显示函数何时启动，上面写着“请稍候”。然后在功能完成后将其关闭。我尝试了以下方法：

function flashFallback(){
  $('#dialog').dialog({
    modal:true,
    autoOpen:false
  });
  $("#dialog").dialog("open");

  /* Other code goes here... 

  */

  $('#dialog').dialog("destroy");
}

我知道函数运行成功，但对话框永远不会关闭。我也尝试过“关闭”而不是“破坏”，但没有运气。救命！

更新：这是完整的功能：

function flashFallback(){
    $('#dialog').dialog({
        modal:true,
        autoOpen:false
    });
    $("#dialog").dialog("open");

    var el = "";
    var vidFileName = "";
    var posterPath = "";
    var videoTag = "";
    var boxId = "";
    var so = "";
    var flashId = "";
    var flashVars = "";
    var params = "";
    var attributes = "";
    var anchorId = "";
    var dotPosition = "";

    $("[id^='vid-']").each(function(){
        el = "";
        vidFileName = "";
        posterPath = "";
        videoTag = "";
        flashId = "";
        flashVars = "";
        params = "";
        attributes = "";
        anchorId = "";

        el = $(this);

        boxId = this.id + "_flashBox";
        flashId = this.id + "_flashPlayer";
        anchorId = this.id + "_anchor";

        el.parent().parent().find("div:first").attr("id",boxId);

        el.parent().find("source").each(function(){
            if ($(this).attr("src").indexOf("m4v") != -1 || 
                $(this).attr("src").indexOf("mp4") != -1){
                vidFileName = $(this).attr("src").substring($(this).attr("src").lastIndexOf("/")+1);
            }
        });

        /*
            IE uses the Flash player, which overlays a 'Play' button
            on the poster image by default; so we use a poster image
            that doesn't have a play button. Otherwise we'd end up 
            with a play button on top of a play button.
        */

        dotPosition = el.parent().find("img").attr("src").lastIndexOf(".");
        posterPath = el.parent().find("img").attr("src").substring(0,dotPosition) + "-ie" + el.parent().find("img").attr("src").substring(dotPosition);

        el = $("[id="+boxId+"]");
        el.empty();
        el.append("<a id='" + anchorId +"'></a>");

        flashvars =
        {
            file:                 vidFileName,
            autostart:            'false',
            image:            posterPath
        };

        params =
        {
            allowfullscreen:      'true', 
            allowscriptaccess:    'always',
            wmode:            'opaque',

        };

        attributes =
        {
            id:                   flashId, 
            name:                 flashId
        };

        swfobject.embedSWF('global/vid/player-licensed.swf', anchorId, '372', '209', '9.0.124', 'global/js/swfobject/expressInstall.swf', flashvars, params, attributes);

    });
     $('#dialog').dialog("destroy");

}

【问题讨论】：

模态框是否应该只显示一段时间？
嗨，马尔科。是的，仅在上述功能完成之前显示。

标签： jquery jquery-ui jquery-ui-dialog

【解决方案1】：

Javascript 是单线程的，所以函数是串行运行的。它会打开对话框（但尚未刷新页面），然后运行您的代码，然后在重新绘制网页之前关闭对话框。

你需要做的是打开对话框并异步运行函数，完成后你想关闭对话框。

【讨论】：

谢谢，psycotik。你如何在 JavaScript 中进行异步调用？
@Alex — setTimeout(myFunc, 0)，通常。
对，显示您的对话框，设置一个超时，在 100 多毫秒后运行您的真实代码，然后退出该函数。然后，一旦你的计算/等完成，关闭对话框。 Lmk 如果你需要代码。如果您要进行 Ajax 调用，请按照 Mark 所说的去做。
嗨，精神病学。请在上面的更新中查看整个功能。我将如何修改它以执行您的建议？谢谢。
在$("#dialog").open; 之后添加setTimeout( function(){ 然后是所有代码，包括关闭对话框的代码，然后是}, 200); }。这将打开您的对话框，然后在 200 毫秒后执行您的所有代码，之后它还将关闭您的对话框

【解决方案2】：

我不确定您的函数应该做什么，或者为什么需要足够长的时间才能需要“请稍候”模式，所以我将假设它是某种请求（AJAX、图像加载等） )。

如果是这种情况，销毁需要在函数回调的一部分内。

【讨论】：

嗯。没想到。谢谢。