能否使用 .toggle() 方法显示 jQuery 模态对话框？

Question

针对典型的向服务器发起AJAX请求，我将ajaxStart和ajaxStop事件绑定到打开和关闭模态jQueryUI对话框上。然而，我有另一种用例，其中有一个或多个div（通常是5个部分），其中包含从数据库检索的显示数据行的相当大的表格。当切换CSS display属性的一个section时（如下所示），我注意到了明显的延迟。

<span id="SECTION_1_collapse">[+/-]</span><br />
<div id="SECTION_1">
<table>
<!-- Typically 100 cols x 250+ rows -->
</table>
</div>

<span id="SECTION_2_collapse">[+/-]</span><br />
<div id="SECTION_2">
<table>
<!-- Typically 100 cols x 250+ rows -->
</table>
</div>
...
...
...

有没有可能在使用.toggle()方法时显示一个模态jQueryUI对话框？ 在这种情况下，id =“SECTION_ _collapse” 的span元素用于折叠id =“SECTION_ ”的div元素。

提前感谢。

编辑：

是的。 这是可能的。 答案在.toggle()处理程序中。 单击事件仍然有一些延迟，但总体上死时间减少了，最后在执行期间得到了一些反馈。 缓存一些jQuery对象也有所帮助。

以下是相关部分，没有所有的管道代码，对话框声明等。

$('#SECTION_1_collapse').click(function(){
  $('#wait_dialog').dialog("open");
  $('#SECTION_1').toggle('slow', function(){
    $('#wait_dialog').dialog("close");
  });
});

- T.P.

---

你应该做什么？你的意思是在成功切换之后显示对话框，还是在切换开始之前？ - Umair A.

在.toggle的执行时间内，基本上模拟了ajaxStart/ajaxStop的相同行为。当单击span并开始切换时，应打开对话框。当将div呈现到页面时，对话框应关闭。 - T.P.

resta - 这不会发生在 .toggle() 的执行时间内，而是发生在 AJAX 调用的开始和结束时。你可以在 ajaxStop 上触发切换，或者你可以使用 $.ajax() 并在适当的回调中触发切换。 - Peter Ajtai

@Peter - 对于这种情况，AJAX请求并没有发生；所有数据都已经在DOM中。我的问题是，在切换操作期间存在相当大的延迟，我希望在过渡期间提供一些反馈。基本上，如果可能的话，它是一个伪AJAX请求 :) - T.P.

然后我会在 .toggle() 处理程序中包含反馈。 - Peter Ajtai

Answer 1

以下将在显示表格和打开/关闭对话框之间进行.toggle()，并隐藏表格。延迟由setTimeout()提供。

这个切换会交替执行两个匿名函数。第一个函数打开对话框，显示表格，然后暂停后关闭对话框。第二个函数只是隐藏表格。

  // Set up a variable to hold the dialog box:
var $dialog = $("<div>").html("I'm busy.").dialog({autoOpen: false,
                                                   // other options
                                                   // ...
                                                   title: 'Status'});

  // Initially have the table hidden.
$("#SECTION_1").hide();

  // Setup the toggle for the show and hide
$('#SECTION_1_collapse').toggle(function(){

      // Show the "loading..." dialog box
    $dialog.dialog("open"); 

      // Show the table... this might take a while
    $("#SECTION_1").show();

      // Close the dialog box after a while... experiment w the timing
    setTimeout(function() { $dialog.dialog("close"); }, 1500);

}, function() {

      // No need for fancy dialog boxes when we hide the big table
    $("#SECTION_1").hide();

});

jsFiddle 示例

- Peter Ajtai

---

太棒了！性能提升了很多，没有延迟时间。谢谢。 - T.P.