Javascript 在keyup（）之后迭代时jQuery冻结

我有一个问题，jQuery在输入框的键控上冻结了几秒钟。我试图根据用户输入的值显示/隐藏表的行，同时使用jQuery操作一些边框

例如，用户键入“3”。在keyup上，所有带有“3”的行都应保持可见，而不带“3”的行将隐藏。 我已经将问题隔离到javascript的注释行。激活时，它们是导致问题的原因。注释它们是纠正我的冻结问题，但我试图实现的边界样式是不正确的。为什么会这样

JS:

HTML:

$10,000
$3.40
$20,000
$5.10

尝试推迟css，直到循环完成：

$（函数（）{
$（“#窄”）.keyup（函数（）{
var shouldsetboorder=false；
var text=$（this.val（）.toLowerCase（）；
$（'.multiples table tbody tr'）。每个（函数（）{
if（$（this）.text（）.toLowerCase（）.indexOf（text）=-1）{
$（this.hide（）；
shouldSetBorder=false；
}否则{
$（this.show（）；
shouldSetBorder=true；
}
});
如果（应订购）{
$（'.table wrapper'）.css（'border'，'2px solid#ccc'）；
$（'.multiples table'）.css（'border-left'，0）；
$（'.multiples table'）.css（'border-top'，0）；
}否则{
$（'.table wrapper'）.css（'border'，0）；
$（'.multiples table'）.css（'border-left'，'2px solid#ccc'）；
$（'.multiples table'）.css（'border-top'，'2px solid#ccc'）；
}
});
});

$10,000
$3.40
$20,000
$5.10
您正在更改
每个
中表的css，一次又一次地更改它。难道你不能在循环内设置一个标志，然后在循环外只改变css一次吗？一个建议是，尽可能尝试缓存查询的元素。例如，存储
$（'.multiples-table'）
并将CSS应用于变量，而不是再次在DOM中查询类为
'multiple-table'
的元素。对于大量的元素，这会产生显著的差异。CSS属性
边框左
/
边框右
没有可接受的
0
<代码>无

将是一个有效选项，用于设置

边框左侧

或

边框顶部

以指示无边框<另一方面，代码>边框宽度会将

0

作为可接受的值。提示：

。toLowerCase（）

与数字无关。将大大简化您的代码，但它可能无法解决您的问题。在这里，去抖动可能是一个好主意，以避免在每个按键上搜索，即使是发生速度超过50毫秒的按键。

$('#narrow').keyup(function () {
    var text = $(this).val().toLowerCase();
    $('.multiples-table tbody tr').each(function () {
        if ($(this).text().toLowerCase().indexOf(text) == -1) {
            $(this).hide();

            $('.table-wrapper').css('border', 0);
            $('.multiples-table').css('border-left', '2px solid #ccc');
            $('.multiples-table').css('border-top', '2px solid #ccc');
        }
        else {
            $(this).show();

            //$('.table-wrapper').css('border', '2px solid #ccc');
            //$('.multiples-table').css('border-left', 0);
            //$('.multiples-table').css('border-top', 0);
        }
    });
});

<input type="text" id="narrow" class="search" placeholder="Filter" value="">
    <div class="table-wrapper">
        <table class="multiples-table">
            <tbody>
                <tr>
                    <td>$10,000</td>
                    <td>$3.40</td>
                    <td>
                        <asp:Button ID="btn1" Text="Select" runat="server" />
                    </td>
                </tr>
                <tr>
                    <td>$20,000</td>
                    <td>$5.10</td>
                    <td>
                        <asp:Button ID="Button1" Text="Select" runat="server" />
                    </td>
                </tr>
           </tbody>
       </table>
    </div>