关闭jQuery模态对话框很慢。

Question

我有一个模态对话框，里面放置了一个HTML表单的内容。该表单包括提交和取消按钮。我发现取消按钮或者点击关闭对话框的 X 按钮都很慢。虽然只有几秒钟的延迟，但足以让人认为存在问题，这可能会让一些鼠标快速点击的用户感到困扰。

是否有更好的方式来使用关闭函数以及取消更改的方法，而不是我目前所做的方法呢？

var $dialog = $('#cameraform').dialog({
    modal:true,
    autoOpen: false,
    resizable:false,
    width: 625,
    close: function() {
        $(this).dialog('close'); //this is slow
    }
}); //init dialog

//events            
$('.addwebcam').click(function(e) {
    $dialog.dialog('open');
});

$(".cancel_changes").click(function() {
    $dialog.dialog('close');    //this is slow
});

HTML:

<button class="addwebcam">Add Webcam</button>
<div id="cameraform" title="Add a camera">
...//my form
<button type='button' class='cancel_changes' name='cancel_changes' value='Cancel'>Cancel</button>
</div>

这里有什么优化可以做吗？提前感谢。

- Tom

---

你不会在这期间一直保持着Firebug吧？我假设你正在使用jQueryUI，如果是这样的话，对话框不应该那么慢。你的页面上有很多其他脚本在运行吗？ - joelmdev

不，但天哪，我刚刚发现你为什么问这个问题。在打开Firebug的情况下，它甚至更加严重，我甚至崩溃了我的浏览器。 - Tom

最好使用Firebug进行调试，然后在不需要时将其关闭。它会使JavaScript页面运行缓慢。 - joelmdev

@jm2 FWIW，我在使用 Chrome 调试器时从未遇到过任何显著的减速。 - Alnitak

@Alnitak 我对我的火狐插件上瘾了，否则我可能会转换。 - joelmdev

Answer 1

在对话框设置中，消除关闭事件的近距离调用：

var $dialog = $('#cameraform').dialog({
    modal:true,
    autoOpen: false,
    resizable:false,
    width: 625,
    close: function() {
      //  $(this).dialog('close'); //this is slow
    }
}); //init dialog

您正在从自身调用关闭事件，导致调用堆栈溢出。

- John Koerner

---

啊，太好了。我以为这是必要的才能关闭窗口。 - Tom

@Tom 不是的，那个钩子是为了让你在对话框关闭时自动执行其他操作。 - Alnitak

第一次看漏了，眼力真好！ - joelmdev