延迟jquery ui对话框关闭，直到回调完成

Posted 2021-04-18

我正在使用jQuery UI Dialog调用一个确认框，如下所示：

function tps_show_confirm(cTitle, cContent, noClose = true, dwidth = 300, callback=null) {
    if (noClose == true) {
        var dClass = 'no-close';
    } else {
        var dClass = '';
    }
    var confirmDiv = '<div class="tps-confirm-modal">'+cContent+'</div>';
    var maxHeight = window.innerHeight * .80;
    $( confirmDiv ).dialog({
        title: cTitle,
        dialogClass: dClass,
        modal: true,
        width: dwidth,
        maxHeight: maxHeight,
        draggable: false,
        resizable: false,
        create: function(event, ui) {
            $('body').css({ overflow: 'hidden' })
        },
        beforeClose: function(event, ui) {
            $('body').css({ overflow: 'inherit' })
        },
        buttons: {
            Ok: function() {
                if (typeof callback === 'function') { 
                    callback(); 
                }
                $( this ).dialog('close');
            },
            Cancel: function() {
                $(this).dialog('close');
            }
        }
    });
}

我试图找出如何在单击“确定”按钮时延迟.dialog('close')操作，直到callback（）函数完成。我已经尝试了.done（）和/或.finish（）和.when（）的各种组合，但我不太明白这些并且它们似乎不适用于这种情况。

任何想法如何实现这一目标？

答案

希望jquery.when将是有用的

  Ok: function() {
                if (typeof callback === 'function') { 
                    $.when(callback()).then(function() {
                      $(this).dialog('close');
                 }.bind(this));
                }else{
                   $( this ).dialog('close');
                }

            }

这个片段很有用。我正在传递一个回调函数。在回调函数中有一个异步调用。现在当你点击ok按钮时，回调函数将开始执行但是只有当异步操作有响应时才会关闭对话框

function tps_show_confirm(callback = null) {
  var confirmDiv = '<div class="tps-confirm-modal">Hello Test</div>';
  var maxHeight = window.innerHeight * .80;
  $(confirmDiv).dialog({
    title: 'test',
    dialogClass: 'dClass',
    modal: true,
    width: 300,
    maxHeight: 300,
    draggable: false,
    resizable: false,
    create: function(event, ui) {
      $('body').css({
        overflow: 'hidden'
      })
    },
    beforeClose: function(event, ui) {
      $('body').css({
        overflow: 'inherit'
      })
    },
    buttons: {
      Ok: function() {
        if (typeof callback === 'function') {
          $.when(callback()).then(function(data) {
            console.log(data)
            $(this).dialog('close');
          }.bind(this));
        } else {
          $(this).dialog('close');
        }

      },
      Cancel: function() {
        $(this).dialog('close');
      }
    }
  });
}

function test() {
  var root = 'https://jsonplaceholder.typicode.com';

  return $.ajax({
    url: root + '/posts/1',
    method: 'GET'
  }).then(function(data) {
    return data;
  });

}
tps_show_confirm(test)

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

以上是关于延迟jquery ui对话框关闭，直到回调完成的主要内容，如果未能解决你的问题，请参考以下文章

动态jQuery UI对话框回调函数问题

如何在打开新对话框之前关闭所有 jquery ui 对话框？

jQuery UI 对话框回调函数中的索引范围

jquery-ui-dialog - 如何挂钩对话框关闭事件

jquery-ui-dialog - 如何挂钩到对话框关闭事件

“jquery dialog”对话框的关闭事件都有哪些？