ASP.NET MVC：AJAX 延迟提交表单答案

【问题标题】：ASP.NET MVC: AJAX submit form with delayASP.NET MVC：AJAX 延迟提交表单
【发布时间】：2011-01-17 19:49:47
【问题描述】：

我有一个 AJAX 表单，每次用户在文本框中键入内容时，我都需要提交该表单。

以下代码有效：

<% using (Ajax.BeginForm("myAction", "myController", null, new AjaxOptions() { InsertionMode = InsertionMode.Replace, UpdateTargetId = "resultDiv" }, new { id = "myForm" }))
   {%>

<script type="text/javascript" language="javascript">
    jQuery("#myForm").keyup(function() { $('#myForm').trigger('onsubmit'); });
</script>

Search: <input type="text" id="myTextField" />

<%} %>

我一直在尝试更新代码，以便在提交表单时延迟 1 秒。延迟将允许仅在用户停止输入一秒间隔时提交表单。此代码不起作用：

<% using (Ajax.BeginForm("myAction", "myController", null, new AjaxOptions() { InsertionMode = InsertionMode.Replace, UpdateTargetId = "resultDiv" }, new { id = "myForm" }))
   {%>

<script type="text/javascript" language="javascript">
    var timerid;
    jQuery("#myForm").keyup(function() {
        clearTimeout(timerid);
        timerid = setTimeout(function() { $('#myForm').trigger('onsubmit'); }, 1000);
    });

</script>

Search: <input type="text" id="myTextField" />

<%} %>

关于如何延迟 ajax 表单提交，直到用户在短时间内停止输入有什么建议吗？

更新：使用 Chrome，我发现脚本在 MicrosoftAjax.js 中的某处因捕获的异常而停止。我不知道如何找到异常到底是什么。

出于调试目的，我将代码改写如下：

    var timerid;

    jQuery("#myForm").keyup(submitWithTimeout);

    function submitWithTimeout() {
        clearTimeout(timerid);
        timerid = setTimeout(submitAjaxForm, 2000);
    }

    function submitAjaxForm() {
        $('#myForm').trigger('onsubmit');
    }

代码执行“submitWithTimeout”函数中的两行，并准确等待2秒。它到达 submitAjaxForm 函数，并在 MicrosoftAjax.js 文件中捕获的异常处停止，如前所述。

更新 2：我现在使用的是 MicrosoftAjax.js 的调试版本，并找到了错误的来源。在 Chrome 中使用表达式观察器，我能够将其缩小到以下问题：在 MicrosoftAjax.js 正在执行时，“eventObject”变量为空。我从源代码中收集到的是，在使用计时器提交表单时，onsubmit 代码的“事件”为空。任何想法为什么？

<form action="myAction" id="myForm" method="post" onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, updateTargetId: 'myResult' });">

new Sys.UI.DomEvent(event)在使用超时方法时，“事件”参数为空值。

【问题讨论】：

“不起作用”是什么意思？错误？不是取消了吗？别的东西？可能不应该在未初始化的变量上清除Timeout——除此之外，希望它能够工作。
不，没有错误。事实上，我看不到任何事情发生。 JavaScript 错误列表清晰，没有调用到达 MVC 中的操作方法。我猜某处存在javascript问题，但我找不到。知道如何处理 ClearTimeout 吗？代码改编自stackoverflow.com/questions/2006870/…。
@Lou：错误被捕获，这就是为什么我没有看到它，虽然我仍然不知道错误是什么，但我知道它来自哪里......查看更新细节。 ClearTimeout 似乎没有问题。

标签： jquery asp.net-mvc ajax forms

【解决方案1】：

我建议您使用TypeWatch jquery plugin，它可以让您轻松实现这一目标。您的代码可能看起来像这样：

$("#myForm input").typeWatch({ 
    callback: function() { 
        $('#myForm').trigger('onsubmit');
    },
    wait: 1000,
    highlight: true,
    captureLength: 3
});

【讨论】：

我正在尝试使用这个插件，但我遇到了一个类似的问题，没有任何反应。我想知道问题是否来自“触发”方法。
看起来问题来自 MicrosoftAjax.js 文件，无论我使用我拥有的代码还是您提到的 TypeWatch 代码。有关更多详细信息，请参阅我的更新...
请看我自己对这个问题的回答。据我所知，存在一个范围问题，即 AJAX 表单请求需要一个“事件”变量，一旦触发 onsubmit 方法，该变量就不再设置。这可能是 TypeWatch 插件不适用于我的场景的原因。 +1 如果您更新您的答案，使其适用于 AJAX 表单。

【解决方案2】：

在一定延迟后尝试提交 AJAX 表单时似乎有一个特殊要求。

正如我在上次更新中提到的（请参阅问题），问题来自于在执行 MicrosoftAjax.js 库并尝试提交表单时未分配 event 变量。 event 变量具有触发表单提交的 KeyboardEvent（或 MouseEvent，我想）。这个event 变量是在触发“keyup”事件时分配的，但在超时到期后不再可用，可能是因为范围丢失了。

我的解决方法是将值存储在全局变量中，以便将事件数据重置为按下键时的状态。

因此，代码如下：

var timerid;
var timerEvent;

jQuery("#myForm").keyup(submitWithTimeout);

function submitWithTimeout() {
    clearTimeout(timerid);
    timerEvent = event;
    timerid = setTimeout(function() { submitAjaxForm(); }, 2000);
}

function submitAjaxForm() {
    event = timerEvent;
    $('#myForm').trigger('onsubmit');
}

【讨论】：