Question

我在页面上有大量输入，除非选中复选框，否则默认情况下每个输入都是禁用（隐藏）的。选中一个相关的复选框可以使用户输入的金额能够正常输入。

在一个给定的框中键入一个数量并将模糊焦点转移到其他东西（表明我已完成此输入）后，我遍历每个可见的输入以检查它是否有一个数量它，然后发送ajax请求以更新后端（这也可以，但是方法是否错误？）。

无效的是，当我遍历5-10个以上的复选框时，它似乎非常慢，或者根本没有发送ajax请求。

对侦听启用/可见数量框进行更改的代码：

$(document).on("blur", ".dollar-amount", function(){  
    MainPage.amountInputListener('add');
});

这是foreach循环，它使用可见字段中的数量更新每个关联用户的后端数据：

var MainPage = {

    amountInputListener: function (type) {

        $(".dollar-amount:visible").each(function () {

            //Get the employee being updated
            var empID = $(this).data('empid');

            //get the amount
            var amount = $(this).val();

            //Send update request to backend
            $.ajax({
                type: "POST",
                url: "update/amount?empid=" + empID + "&amt=" + amount + '&type=' + type,
                dataType: "html"
            });

        });
    },
}

输入的HTML：

<input type="text" name="dollar_hour_amountX" value="0" class="form-control dollar-amount disabled" data-empid="1" tabindex="-1" disabled>

注意： dollar_hour_amountX，X是与该行的员工ID相关的动态数字。 data-empid是相同的动态数字，也在for循环中使用。

我尝试确保循环正常进行的事情：

添加async: false。这使它可以100％地工作，但是添加的输入越多，速度就越慢。
在整个函数周围增加100-1000ms的超时时间，这只会延迟Ajax调用的往返时间。

我愿意接受Vanilla JS的建议，因为它有助于使对后端的调用更加快捷和一致。

Answer 1

                                               // capture the passed in event
$(document).on("blur", ".dollar-amount", function(e){  
                             // give the element to the method
    MainPage.amountInputListener(e.target, 'add');
});

var MainPage = {
                                // accept the element on the arguments
    amountInputListener: function (element, type) {
// use the element in place of `this`

            //Get the employee being updated
            var empID = $(element).data('empid');

            //get the amount
            var amount = $(element).val();

            //Send update request to backend
            $.ajax({
                type: "POST",
                url: "update/amount?empid=" + empID + "&amt=" + amount + '&type=' + type,
                dataType: "html"
            });

    },
}

Answer 2

更新所有内容都没有意义，只是更新哪些更改。

$('.dollar-amount').on("change", function () {
   console.log(this.value, $(this).data('empid'))
   // make the one Ajax request
})

或更改您的后端以能够处理一次发送的多个事件，这样您就不会给后端打很多电话。

Answer 3

“我正在遍历每个可见输入，以检查其中是否包含一定数量，然后发送ajax请求以更新后端（这也可行，但方法可能是错误的？）。”

我强烈建议您更改此方法。我怀疑它将解决您的问题。不要每次都遍历所有这些。没有必要。简而言之，在模糊的情况下，只需检查此特定输入是否已更改，然后仅在编辑了该特定输入的情况下才发送ajax调用。

只需将“ this”作为参数传递到amountInputListener中，然后摆脱上面的“ each”函数。其余的将是相同的。代替$（this），只需传递表示事件中“ this”的参数值即可。

Answer 4

首先要避免的是使用get http verb请求更新。这不是按标准的，通常使用get请求来检索数据。

接下来的事情是，而不是对每个调用名称为.dollar-amount且可见的元素进行ajax调用，最好在对象类型数组的foreach块上方声明一个全局变量，然后在阻止该全局变量，然后在for块执行完成后最终发出ajax请求


    amountInputListener: function (type) {
        var objList = [];
        $(".dollar-amount:visible").each(function () {

            //Get the employee being updated
            var empID = $(this).data('empid');

            //get the amount
            var amount = $(this).val();

            //Send update request to backend
          objList.push({
            'empId':empId,
            'amt':amount,
            'type': type
          });
        });
       $.ajax({
                type: "post",
                url: "update/amount"
                dataType: "application/json",
                data:{'data':objList}
            });
    },
}

通过这种方式，您可以一次将所有数据发送到服务器，这确实有助于提高性能。

注意：代码只是为了给您一个想法。

多个输入循环会减慢each（）和ajax（）

4 个答案: