How To Break Javascript Operation On Input And Start New Operation

I have produced a table but I am using

s instead of s and s. here is an example:

Solution 1:

You have quite a lot of jQuery operations that, when put together over many rows, may take a not-insignificant amount of time. Rather than constructing lots of jQuery collections (which have some overhead) and re-calculating the index you're looking for on every iteration, consider using vanilla Javascript instead, which is far more lightweight. You can also create an array of the filter values and their associated index in advance, so you don't have to navigate through the DOM to find them every iteration:

$(".Filter").on('input', function() {
  $(".rowCount").val(filterGrid());
});

functionfilterGrid() {
  const values = Array.from(
    document.querySelectorAll('.thead .Filter'),
    elm => elm.value
  );
  
  let rowsShown = 0;
  document.querySelectorAll('.tbody .tr').forEach((tr) => {
    const tds = tr.querySelectorAll('.td');
    const noMatch = values.some((value, i) => {
      if (!value) {
        return;
      }
      const td = tds[i];
      return !td.innerHTML.includes(value);
    });
    if (noMatch) {
      tr.style.display = 'none';
    } else {
      tr.style.display = 'block';
      rowsShown++;
    }
  });
  return rowsShown;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

RowCount: <spanclass="rowCount">1</span><divclass="tbl tbl1"><divclass="thead"><divclass="tr"><divclass="td colTitle"style="width: 120px"><span>Title</span></div><divclass="td colLink"style="width: 190px"><span>Link</span></div><divclass="td colSize numeric"style="width: 75px"><span>Size(MB)</span></div><divclass="td colUploadDate"style="width: 75px"><span>UploadDate</span></div><divclass="td colOpen"style="width: 50px; max-width: 50px;"><span>Show</span></div></div><divclass="tr"><divclass="td colTitle"><inputtype="text"class="Filter" /></div><divclass="td colLink"><inputtype="text"class="Filter" /></div><divclass="td colSize"><inputtype="text"class="Filter" /></div><divclass="td colUploadDate"><inputtype="text"class="Filter" /></div><divclass="td colOpen"></div></div></div><divclass="tbody"><divclass="tr"idattachment="1"><divclass="td colTitle"style="width: 120px;">FirstFile</div><divclass="td colLink"style="width: 190px;">uf1_1.png</div><divclass="td colSize"style="width: 75px;">0.11</div><divclass="td colUploadDate"style="width: 75px;">1397/12/13</div><divclass="td colOpen"style="width: 50px;"><aclass="link"href="uploads/uf1_1.png">Open</a></div></div></div></div>

If that's not fast enough, you can use for loops instead of array methods, which will make things a bit faster (though more difficult to read).

If you have a huge number of rows in the .tbody and this still isn't fast enough, then you might consider adding a debouncer to the input listener, so that filterGrid is only called after, say, 200ms after the last character was typed, so that the big operation only occurs once you have at least a bit of confidence that the character that was just typed might be the last one the user wants to input (rather than running filterGrid after every single character typed):

let filterTimeout;
$(".Filter").on('input', function() {
  clearTimeout(filterTimeout);
  filterTimeout = setTimeout(() => {
    $(".rowCount").val(filterGrid());
  }, 200);
});

Share