使用 form-repeater 在填充的 table 中添加一个新行需要很长时间（10-15 秒）- jQuery

Question

我正在为 table 元素使用 form-repeater 插件。填充 table 后，当我单击加号按钮（添加新行）时，需要花费大量时间（大约 10-15 秒）才能附加新行。

Screenshot of my table

每次点击（加号按钮）执行以下功能

CheckEmptyInputs()
CheckDuplicateRanges() ：检查最小范围和最大范围中的重复范围。

我尝试过的事情：

在验证后每次成功单击加号按钮时，将名为 " completed " 的 class 添加到所有行。我这样做是因为当我再次单击加号按钮时，我告诉 JS 不要检查 class " 完成的行 " 以避免不必要的检查。
我删除了 class " 已完成" OnDOMSubtreeModified 为 tr。所以这个计划工作正常，JS 不会每次都检查这些名为 completed class 的行，除非 class 被删除。
我尝试检查哪个函数花费了大量时间，结果 checkEmptyInputs() 和 CheckDuplicateRanges() 执行得更快。

NOTE - 1 : I am using summernote extremely customized for the Min-Max-Range-Columns. NOTE - 2 : I am using select2 plugin for the dropdownlist Columns.

因此我认为时间延迟可能是由于以下原因造成的

正在为这 6 列初始化 summernote 和 select2 插件
可能是表单转发器代码有问题。 我没有检查复读机代码

这是我当前的代码。

加号按钮的 HTML 代码（虚拟和原始）：

<td colspan="2">
        <button data-repeater-create type="button" class="btn btn-gradient- 
            info btn-sm icon-btn ml-2 mb-2" id="btnaddnewroworiginal" 
            style="display:none;">
                <i class="mdi mdi-plus"></i>
        </button>
        <button type="button" class="btn btn-gradient-info btn-sm icon-btn 
            ml-2 mb-2 btnaddnewrowdummy" data-toggle="tooltip" data- 
            placement="top" title="Add new row">
            <i class="mdi mdi-plus"></i>
        </button>
</td>

加号按钮点击事件：

    $(document).on("click", ".btnaddnewrowdummy", function () {
            var EmptyInputs = CheckEmptyInputs();
            if (EmptyInputs > 0) {
                alert("Empty Inputs Found. Please fill all the required (*) values.");
            }
            else {
                var DuplicateRangeValues = CheckDuplicateRanges();
                if (DuplicateRangeValues > 0) {
                    alert("Duplicate Max-Range values found. Please enter unique values.");
                }
                else {
                    $("#SubCategoryTable tr").each(function () {
                        $(this).addClass("completed");
                    });
                    $("#btnaddnewroworiginal").click();
                    $("#SubCategoryTable tr:last").find('.txtname').val('');
                    $("#SubCategoryTable tr:last").find(".txtminage").val("0");
                    $("#SubCategoryTable tr:last").find(".txtmaxage").val("99");
                    $("#SubCategoryTable tr:last").find('.js-example-basic-single').select2({
                        escapeMarkup: function (markup) {
                            return markup;
                        }
                    });
                    $("#SubCategoryTable tr:last").find(".js-example-basic-single-2").select2();
                    $("#SubCategoryTable tr:last").find(".summernote").summernote({
                        toolbar: [],
                        height: 50,
                        minHeight: 50,
                        maxHeight: 50,
                        disableResizeEditoroption: true
                    });
                    $("#SubCategoryTable tr:last").find(".summernote").each(function () {
                        $(this).summernote('code', '');
                    });
                    $("#SubCategoryTable tr:last").find('.note-editable').off();
                    $('[data-toggle="tooltip"]').tooltip();
                    $("#SubCategoryTable tr:last").find(".txtsubheading").val($("#SubCategoryTable tr:last").prev("tr").find(".txtsubheading").val().trim());
                    $("#SubCategoryTable tr:last").find(".ddlItemFor").val($("#SubCategoryTable tr:last").prev("tr").find(".ddlItemFor").val()).trigger("change");
                    if ($("#SubCategoryTable tr:last").prev("tr").find(".txtsubheading").val().trim() != "") {
                        $("#SubCategoryTable tr:last").find(".selectUnits").val($("#SubCategoryTable tr:last").prev("tr").find(".selectUnits").val()).trigger("change");
                    }
                }
            }
        });

CheckEmptyInputs 函数：

function CheckEmptyInputs() {
            var empty_count = 0;
            $("#SubCategoryTable tr").each(function () {
                var row = $(this);
                if ($(row).hasClass("completed") == false) {
                    var name = row.find("td").find(".txtname").val();
                    if (name.trim() == "") {
                        empty_count++;
                    }
                    var UnitsVal = row.find("td").find(".selectUnits").val();
                    if (UnitsVal == 0) {
                        empty_count++;
                    }
                    var minage = row.find("td").find(".txtminage").val();
                    if (minage.trim() == "") {
                        empty_count++;
                    }
                    var maxage = row.find("td").find(".txtmaxage").val();
                    if (maxage.trim() == "") {
                        empty_count++;
                    }
                    var minmalerange = row.find("td").find(".txtminmalerange").summernote("code");
                    if (minmalerange.trim() == "") {
                        empty_count++;
                    }

                    var minfemalerange = row.find("td").find(".txtminfemalerange").summernote("code");
                    if (minfemalerange.trim() == "") {
                        empty_count++;
                    }
                }
            });
            return empty_count;
        }

CheckDuplicateRanges 函数：

function CheckDuplicateRanges() {
            var MinMaleRange = "";
            var MaxMaleRange = "";
            var MinFemaleRange = "";
            var MaxFemaleRange = "";
            var DuplicateCount = 0;
            $("#SubCategoryTable tr").each(function () {
                var row = $(this);
                if ($(row).hasClass("completed") == false) {
                    MinMaleRange = row.find("td").find(".txtminmalerange").summernote("code").replace(/&nbsp;/g, '').replace(/<br\s*[\/]?>/gi, '').replace(/\s/g, '');
                    MaxMaleRange = row.find("td").find(".txtmaxmalerange").summernote("code").replace(/&nbsp;/g, '').replace(/<br\s*[\/]?>/gi, '').replace(/\s/g, '');
                    if (MinMaleRange == MaxMaleRange) {
                        DuplicateCount++;
                        row.find("td").find(".txtmaxmalerange").next().css("border-color", "red");
                    }
                    else {
                        row.find("td").find(".txtmaxmalerange").next().css("border-color", "#ebedf2");
                    }

                    MinFemaleRange = row.find("td").find(".txtminfemalerange").summernote("code").replace(/&nbsp;/g, '').replace(/<br\s*[\/]?>/gi, '').replace(/\s/g, '');
                    MaxFemaleRange = row.find("td").find(".txtmaxfemalerange").summernote("code").replace(/&nbsp;/g, '').replace(/<br\s*[\/]?>/gi, '').replace(/\s/g, '');
                    if (MinFemaleRange == MaxFemaleRange) {
                        DuplicateCount++;
                        row.find("td").find(".txtmaxfemalerange").next().css("border-color", "red");
                    }
                    else {
                        row.find("td").find(".txtmaxfemalerange").next().css("border-color", "#ebedf2");
                    }
                }
            });
            return DuplicateCount;
        }

复读机代码：

(function($) {
    'use strict';
    $(function() {
         $('.repeater').repeater({
                defaultValues: {
                    'text-input': 'foo'
                },
             show: function () {
                 $(this).slideDown();
                 // I wonder if there is a problem with .not()
                 $('#tblRepeater>tbody>tr').not(':first').each(function () {
                     var select = $(this).closest('tr').find(".drpUnits");
                     $(this).closest('tr').find(".drpUnits").addClass('js-example-basic-double');
                     // I think this line here is unnecessary as it is 
                     // initialized in my code ??
                     $('.js-example-basic-double').select2();
                 });
                },
             hide: function (deleteElement) {
                 if (confirm("Are you sure you want to delete this row ?. Once deleted data cannot be retrieved.")) {
                     $(this).slideUp(deleteElement);
                 }
                 else {
                 }  
                },
             isFirstItemUndeletable: false
            })
    });
})(jQuery);

Answer 1

我终于找到了问题的解决方案。我所做的只是按照预期从 form-repeater js 代码中隐藏这些行。因为这些行重复 re-initializing 每次我单击加号按钮时 $.each 中所有行的所有行。

我的解决方案： 我隐藏了 form-repeater 中的那四行，这大大减少了时间延迟从 15-20 秒到 1-2 秒

              show: function () {
                 $(this).slideDown();
                 //$('#tblRepeater>tbody>tr').not(':first').each(function () {
                     //var select = $(this).closest('tr').find(".drpUnits");
                     //$(this).closest('tr').find(".drpUnits").addClass('js-example-basic-double');
                     //$('.js-example-basic-double').select2();
                 //});
                },

使用 form-repeater 在填充的 table 中添加一个新行需要很长时间（10-15 秒）- jQuery

Appending a new row inside the populated table using form-repeater takes a huge time (10-15s) - jQuery

javascript

performance

jquery

jquery-plugins

这是我当前的代码。