Question

我有一个搜索表单，我正在尝试动态类型下来。关键字我提交表格。但是我遇到了大数据集的问题。问题是每个表单提交总是返回一个结果，结果总是插入到DOM中。例如，当我在keyup上键入第4个字符时，它会提交表单并返回100个匹配结果。输入第5个字符时，它只返回2个结果。第5个字符的执行时间比第4个字符快。所以最终发生的事情是它在DOM中绘制2个结果然后第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>

Answer 1

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

Debouncing强制执行一个函数不会再被调用，直到一定时间过去而没有被调用。正如在＆＃34中;只有在没有被调用的情况下经过100毫秒才执行此功能。

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

Answer 2

@bhabisha Kumar在头上钉了这个。去抖功能正是我需要让代码工作的。这是最终的工作代码。

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

在Key Up上取消之前的Jquery表单提交

2 个答案: