取消之前的 Jquery 键上提交表单

Question

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

如果在提交后发生 keyup 事件，有没有办法取消或忽略以前的表单 post 结果？这是表格并通过 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>

Answer 1

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

Debouncing enforces that a function not be called again until a certain amount of time has passed without it being called. As in "execute this function only if 100 milliseconds have passed without it being called.

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

Answer 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>

取消之前的 Jquery 键上提交表单

Cancel a previous Jquery Form Submit on Key Up

.net

javascript

forms

jquery

submit