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

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元素可能会很慢,我认为如果在每次调用完成之前再次执行该函数,如果我停止执行每个调用,我可以加快速度.我怎样才能做到这一点？

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);
});