文章/答案/技术大牛

发布

社区首页 >问答首页 >如何提高以下jquery代码的效率

问如何提高以下jquery代码的效率
EN

Stack Overflow用户

提问于 2018-12-12 12:07:23

回答 2查看 50关注 0票数 0

我在jsp页面中有一个表，其中每行只包含一个输入字段，供用户输入。如果其中一个textfield为空，则要求将submit按钮保持为禁用状态，并且只有在所有字段都已填充时才启用该按钮。我给了输入字段类名"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');
    }
});

javascript

jquery

performance

jsp

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-12-12 13:06:50

在我看来，里面的代码

如果($(this).val() === '') {.}

如果一次又一次的调用是相当沉重的。

我的建议是在遇到第一个"textfield为空“时中断迭代，因此您将使用return true只运行此代码一次。

document.getElementById('myPopup').style.visibility =‘隐藏’；document.getElementById('myPopup3').style.visibility =‘可见’；document.getElementById('myPopup4').style.visibility =‘隐藏’；$(‘#save_button’).prop(“禁用”，真)；$('#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

Stack Overflow用户

发布于 2018-12-12 13:26:46

我想实现性能的最好方法是使用jQuery、切换函数和toggleClass。此外，您还应该在循环之外定义所有变量。这些更改应该会创建一个显着的性能速度up.Try来测试这个：

$(function() {

  const $symbol = $('#symbol icon-error');
  const $myPopup = $('#myPopup');
  const $myPopup3 = $('#myPopup3');
  const $myPopup4 = $('#myPopup4');
  const $saveBtn = $('#save_button');

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

    var isValid;

    $('.QtytobePacked').each(function() {
      isValid = $(this).val() !== '';

      $symbol.toggle(isValid);
      $myPopup.toggle(!isValid);
      $myPopup3.toggle(!isValid);
      $myPopup4.toggle(!isValid);

      $saveBtn.prop('disabled', !isValid).toggleClass('upload_button_active upload_button_inactive');
    });
  })
});

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/53742697

复制

相似问题

问如何提高以下jquery代码的效率
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何提高以下jquery代码的效率EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何提高以下jquery代码的效率
EN