取消先前的 Jquery 表单提交答案

【问题标题】：Cancel a previous Jquery Form Submit on Key Up取消先前的 Jquery 表单提交
【发布时间】：2016-04-14 16:06:28
【问题描述】：

我有一个搜索表单，我正在尝试对其进行动态输入。在 keyup 上，我正在提交表单。但是，我遇到了大型数据集的问题。问题是每个表单提交总是返回一个结果，并且该结果总是插入到 DOM 中。例如，当我在 keyup 上输入第 4 个字符时，它会提交表单并返回 100 个匹配结果。输入第 5 个字符时，它只返回 2 个结果。第 5 个字符的执行时间比第 4 个更快。所以最终发生的事情是将 2 个结果绘制到 DOM 中，然后第 4 个返回并将 100 个结果绘制到 DOM 中。

如果在提交后发生 keyup 事件，有没有办法取消或忽略以前的表单发布结果？这是表单并通过 javascript 提交

@using (Ajax.BeginForm(new AjaxOptions
{
    HttpMethod = "get",
    InsertionMode = InsertionMode.Replace,
    UpdateTargetId = "Breweries"
}))
{
    <input id="brewerySearchInput" class="form-control page-header-input" placeholder="Search" type="search" name="searchTerm" />
}

<script>
    $("#brewerySearchInput").keyup(function () {
        if ($(this).val().length >= 3 || $(this).val().length == 0) {
            $('#form0').delay(200).submit();
        }
    });
</script>

【问题讨论】：

标签： javascript jquery .net forms submit

【解决方案1】：

我认为你的例子是使用debounce 函数的经典案例。

去抖动强制一个函数在没有被调用的情况下经过一定的时间后才被再次调用。就像“只有在 100 毫秒没有被调用的情况下才执行这个函数。

否则，您将发出太多不必要的后端请求。看看https://davidwalsh.name/javascript-debounce-function

【讨论】：

宾果游戏！！！这就像一个魅力！对于关注这里的人是根据上述答案调整的代码以供参考

【解决方案2】：

@bhabisha Kumar 把这个问题钉在了头上。 debounce 函数正是我让代码工作所需要的。这是最终的工作代码。

<script>

    function debounce(func, wait, immediate) {
        var timeout;
        return function () {
            var context = this, args = arguments;
            var later = function () {
                timeout = null;
                if (!immediate) func.apply(context, args);
            };
            var callNow = immediate && !timeout;
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
            if (callNow) func.apply(context, args);
        };
    };

    var myEfficientFn = debounce(function () {
        if ($(this).val().length >= 3 || $(this).val().length == 0) {
            $('#form0').submit();
        }

    }, 300);

    $("#brewerySearchInput").keyup(myEfficientFn);
</script>

【讨论】：