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

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

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

解决方法:

您可以通过向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);
});

标签：javascript,jquery,keyboard-events
来源： https://codeday.me/bug/20190727/1556063.html