javascript - 如何限制或限制此函数调用中的函数调用次数(以提高性能)？

Question

我有一个看起来像这样的函数:

function someFunction(text) {
    $('.class').each(function() {
        var $this = $(this);
        if ($this.text().match(text)) {
           $this.addClass('found');
        } else {
           $this.removeClass('found');
        }
    });
}

并且该函数在 keyup 事件中执行，

$('input[type=text]').keyup(function() {
   someFunction($(this).val());
});

在 IE 上，如果有很多 .class 元素，它可能会很慢，我认为如果我停止执行 each 调用，如果函数在 each 调用之前再次执行，我可以加快速度完成的。我该怎么做？

Answer 1

您可以通过向 keyup 处理程序添加轻微的延迟来加快此过程，这样 DOM 仅在键入结束后而不是每次击键时受到影响。您还可以使用 :contains 选择器来查找元素。试试这个:

function someFunction(text) {
    $('.class').removeClass('found').filter(':contains("' + text + '")').addClass('found');
}

var timer;
$('input[type=text]').keyup(function() {
    clearTimeout(timer);
    timer = setTimeout(function() {
        someFunction(this.value);
    }, 100);
});

此外，正如@A.Wolff 所提到的，您可以缓存 .class 选择器，但这只有在没有 .class 元素动态添加到 DOM 时才有效在您搜索时:

var $elements = $('.class');
function someFunction(text) {
    $elements.removeClass('found').filter(':contains("' + text + '")').addClass('found');
}

var timer;
$('input[type=text]').keyup(function() {
    clearTimeout(timer);
    timer = setTimeout(function() {
        someFunction(this.value);
    }, 100);
});