如何使以下jQuery代碼更有效

Question

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

Answer 1

我認為里面的代碼

如果（$（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"> 

Answer 2

我猜想達到性能的最好方法是使用jQuery 切換功能和toggleClass 。 同樣，您應該在循環之外定義所有變量。 這些更改將大大提高性能，請嘗試測試一下：

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