多次单击后jQuery AutoComplete变慢并挂起浏览器

时间:2019-06-17 05:49:08

标签: javascript jquery performance autocomplete

我输入标记很少,可以自动完成。

JavaScript:

api

HTML:

    function processAutoComplete(objEvent, strResult, strTypeOrSubtype) {
        if ($(objEvent.target).closest('.test-section[data-createdviapost]').length === 0) {
            if (strTypeOrSubtype === '.test-type') {
                strResult = strResult.filter(function (strVal) {
                    return lstTypeHidden.indexOf(strVal) == -1;
                });
            } else if (strTypeOrSubtype === '.test-subtype') {
                strResult = strResult.filter(function (strVal) {
                    return lstSubTypeHidden.indexOf(strVal) == -1;
                });
            }
        }
        $(objEvent.target).closest('.test-section').find('' + strTypeOrSubtype + '').attr("data-source", '[' + strResult.join() + ']');
        let lstDataSource = $(objEvent.target).attr("data-source").replace("[", "").replace("]", "").split(",");
        $(objEvent.target).autocomplete({
            minLength: 0,
            source: function (request, response) {
                var results = $.ui.autocomplete.filter(lstDataSource, request.term);
                response(results.slice(0, 10));
            },
            response: function (event, ui) {
                if (!ui.content.length) {
                    ui.content.push({
                        label: $Label.NoMatchesFound,
                        value: "",
                        id: 0
                    });
                }
                setTimeout(function () {
                    if (stringIsBlank($(event.target).val())) {
                        $(event.target).trigger('change');
                    }
                }, 500);

            },
            select: function (objSelectEvent, objUI) {
                if (strTypeOrSubtype === '.test-subtype') {
                    fireRemoteActionForCaseSubtype(objUI, objEvent);
                } else {
                    if (objUI.item) {
                        setTimeout(function () {
                            $(objEvent.target).trigger('change');
                        }, 1000);
                    }
                }
            },
            create: function (objEvent, objUI) {
                $(objEvent.target).autocomplete('search', '');
            }
        }).click(function (objClickEvent) {
            var caseValue = '';
            var caseTypeValue = '';
            if (strTypeOrSubtype === '.test-subtype') {
                caseValue = $(objEvent.target).closest('.test-section').find(".test-type").val().trim();
                fireRemoteActionForCaseType(caseValue, objEvent, objClickEvent);
            } else {
                caseValue = $(objEvent.target).closest('.test-section').find(".test-subtype").val().trim();
                caseTypeValue = $(objEvent.target).closest('.test-section').find(".test-type").val().trim();
                fireRemoteActionOnClickAutocomplete(caseTypeValue, caseValue, objEvent);
            }
        }).data("ui-autocomplete")._renderItem = function (ul, item) {
            var term = this.term;
            var strItemLabel = item.label.trim();
            var regex = new RegExp("(" + $.ui.autocomplete.escapeRegex(term) + ")", "ig");
            var label = strItemLabel.replace(regex, '<b style="font-weight: bold;">$&</b>');
            $link = $("<a></a>").html(label);
            if ($(ul).attr("data-targetId") === undefined) {
                $(ul).attr("data-targetId", $(objEvent.target).attr("id"));
            }

            if (strItemLabel.toUpperCase() !== $Label.NoMatchesFound.toUpperCase()) {
                $link = $("<a></a>").html(label);
                return $("<li></li>").append($link).appendTo(ul);
            } else {
                return $("<li class='no-select'>" + label + "</li>").appendTo(ul);
            }
        };
        spinner(false);
    }

在输入标签上多次单击后,浏览器速度变慢。 我可能有一个想法,为什么会这样,但是我不确定如何解决。

可能的问题:我在上面的代码中插入了两个 <input type="text" id="CaseType" class="autocomplete case-type" oninput="processAutoComplete(event)" onclick="processAutoComplete(event)" required="required" data-apiname= "Type"/> ,我可能没有等他们完成。

可能的问题2:更新 setTimeout在这些事件中只有timeStamp发生更改的情况下被多次触发。我认为因此setTimeOut排队,从而延迟了进一步的调用。不知道为什么会多次触发响应。

在这种情况下如何使用诺言?

0 个答案:

没有答案