如何使以下jQuery代码更有效

时间：2018-12-12 12:07:24

标签： javascript jquery performance jsp

我在jsp页面中有一个表，每行中只包含一个输入字段供用户输入。要求是即使文本字段之一为空，也要使提交按钮保持禁用状态，并且仅在所有文本字段都填满时才启用它。我给了输入字段类名“ QtytobePacked”。

对于100个左右的行它可以正常工作，但是当行数增加到大于500（例如1200）时，它将变得非常慢。有没有更快的方法？

ASP.NET

2 个答案:

答案 0 :(得分：1)

我认为其中的代码

  

if（$（this）.val（）===''）{...}

如果一次又一次地调用，会很沉重。

我的建议是在遇到第一个“文本字段为空”时中断迭代，因此您将只使用return true

运行一次此代码。
  

isValid = false;               document.getElementById（'myPopup'）。style.visibility ='hidden';               document.getElementById（'myPopup3'）。style.visibility ='visible';               document.getElementById（'myPopup4'）。style.visibility ='hidden';               $（'＃save_button'）。prop（“ disabled”，true）;               $（'＃save_button'）。attr（'class'，'upload_button_inactive'）;

希望我的摘要会帮助您缩短js处理时间。

祝你有美好的一天！

$('body').bind("change keyup mousemove", function(event) {

    var isValid = true;
    $('.QtytobePacked').each(function() {
        if ($(this).val() === '') {
            isValid = false;
            document.getElementById('myPopup').style.visibility = 'hidden';
            document.getElementById('myPopup3').style.visibility = 'visible';
            document.getElementById('myPopup4').style.visibility = 'hidden';
            $('#save_button').prop("disabled", true);
            $('#save_button').attr('class', 'upload_button_inactive');
            
            // stop the iteration, so the code at line 8 will only run once per iteration.
            return true
        }
    });

    if (isValid) {
        //alert(isValid);
        document.getElementById('myPopup').style.visibility = 'hidden';
        document.getElementById('myPopup3').style.visibility = 'hidden';
        document.getElementById('myPopup4').style.visibility = 'visible';
        $('#save_button').removeAttr('disabled');
        $('#save_button').attr('class', 'upload_button_active');
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="myPopup">myPopup</div>
<div id="myPopup3">myPopup3</div>
<div id="myPopup4">myPopup4</div>

<input type="button" id ="save_button" value="save">

<!-- this will be validated-->
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">

<!-- stop validate after this input-->
<input type="text" class="QtytobePacked" value="">

<!-- not need to validate-->
<input type="text" class="QtytobePacked" value="">
<input type="text" class="QtytobePacked" value="">
<input type="text" class="QtytobePacked" value="">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">
<input type="text" class="QtytobePacked" value="hahahaha">

答案 1 :(得分：0)

我猜想达到最佳性能的最好方法是使用jQuery toggle函数和toggleClass。同样，您应该在循环之外定义所有变量。这些更改应该可以显着提高性能。尝试对此进行测试：

print([matches.groups()[-1]])  # output => ['Error Code: 1046. No database selected']
相关问题
最新问题