javascript - 如何让下面的jquery代码更加高效

标签 javascript jquery performance jsp

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

对于 100 行左右的行，它工作得很好，但是当行数增加到大于 500 时，比如 1200，它会变得非常慢。有没有更快的方法？

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

    var isValid = true;
    $('.QtytobePacked').each(function() {

        if ($(this).val() === '') {
            isValid = false;
            document.getElementById('symbol icon-error').style.visibility = 'hidden';
            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');

        }
    });

    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');
    }
});

最佳答案

我认为里面的代码

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

关于javascript - 如何让下面的jquery代码更加高效，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53742697/

上一篇：JavaScript 购买 SDK - Shopify

下一篇：javascript - 为什么这个 for 循环添加的嵌套对象比预期更多？

相关文章：

javascript - 在 android WebView 中的 java 和 javascript 之间共享一个对象(数据)

javascript - 使用 jQuery 动态分配宽度百分比

MySQL SELECT 效率

r - 最快的 R 相当于 MATLAB 的 reshape() 方法？

javascript - 在 JavaScript 中查找具有较大数字的 LCM 时出错

javascript - 仅针对 html 禁用 flex 滚动，但针对溢出 :scroll 的元素进行维护

javascript - 如何获取表格给定行的所有列

javascript - 用于自动填写 Angular 创建的用户密码表单的内容脚本

javascript - 避免在第一次 ajax 调用完成之前通过 ajax 请求提交多个表单

javascript - Vuejs Webpack压缩插件不压缩

©2024 IT工具网  联系我们