jQuery 只执行最后一个事件

Question

我有一个行数超过 200 的表。我在表行中搜索特定文本，如果文本存在(作为行中的子字符串)，我会迭代这些行并使它们可见。如果文本不存在，我会让它们不可见。我在文本字段上使用输入监听器来检测键入的文本:

$(document).ready(function () { //bind when DOM ready
    $('[name="token_search"]').on("input", function (evt) { //listener on textfield
        if ($(this).val() == "") { //if no text-show all rows
            $(".tokens-table tr").show();
            return;
        } else { //filter rows based on typed text
            $(".tokens-table tr").each(function (index) {
                if (index > 1) //do not hide first two rows
                    if ($(this).children()[0].innerHTML.indexOf($('[name="token_search"]').val()) != -1) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
            });
        }
    });
});

当用户键入文本时，该方法将对超过 200 个项目的每个输入事件进行子字符串搜索。当用户输入速度太快或在低端设备上输入时，这会导致 UI 挂起。如何修改上述代码以仅对搜索字段上的最后一个输入事件执行，而不是对队列中的所有输入事件执行？我的意思是，一旦用户输入一个新字符，我希望队列中所有先前的事件都被清除。

Answer 1

基本上，您需要使用计时器来等待用户停止输入一段设定的时间，然后调用您的函数。正如 charlietfl 指出的那样，每当您要在代码中多次使用元素和值时，您也应该缓存它们。下面的内容应该可以解决问题:

老实说，如果您打算创建一个过滤表格的搜索框，您可能需要查看 DataTables它在过滤方面做得非常出色，还有更多。

 $(document).ready(function() { //bind when DOM ready
   $('[name="token_search"]').on("keyup", function(evt) { //listener on textfield
     var $this = $(this);
     var value = $this.val(); // incorporated charlietfl's improvements
     // cache the value of the search input and this
     delay(function() {
       $(".tokens-table tr:gt(1)").each(function(index, element) {
         var $element = $(element);
         $this.val() == "" || $element.children()[0].innerHTML.indexOf(value) != -1 ? $element.show() : $element.hide();
       });
     }, 700); // waits till the user has stopped typing for 7/10 of a second, adjust as needed
     // 1000 = 1 second
   });
 });

 var delay = (function() {
   var timer = 0;
   return function(callback, ms) {
     clearTimeout(timer);
     timer = setTimeout(callback, ms);
   };
 })();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="token_search" id=""><br><br>
    
    <table class="tokens-table">
        <tr>
            <td>unfilterable row</td>
            <td>some data</td>
            <td>some data</td>
        </tr>
        <tr>
            <td>unfilterable row</td>
            <td>some data</td>
            <td>some data</td>
        </tr>
        <tr>
            <td>one</td>
            <td>some data</td>
            <td>some data</td>
        </tr>
        <tr>
            <td>two</td>
            <td>some data</td>
            <td>some data</td>
        </tr>
        <tr>
            <td>one</td>
            <td>some data</td>
            <td>some data</td>
        </tr>
        <tr>
            <td>four</td>
            <td>some data</td>
            <td>some data</td>
        </tr>
        <tr>
            <td>one</td>
            <td>some data</td>
            <td>some data</td>
        </tr>
        <tr>
            <td>three</td>
            <td>some data</td>
            <td>some data</td>
        </tr>
        <tr>
            <td>two</td>
            <td>some data</td>
            <td>some data</td>
        </tr>
        <tr>
            <td>one</td>
            <td>some data</td>
            <td>some data</td>
        </tr>
        <tr>
            <td>three</td>
            <td>some data</td>
            <td>some data</td>
        </tr>
        <tr>
            <td>one</td>
            <td>some data</td>
            <td>some data</td>
        </tr>
    </table>