在keyup上显示延迟的数组值

Question

我有以下内容应该隐藏/显示延迟为3秒的数组值：

function loop(s, val) {
    s.style.display = val;
    if (++i < s.length) {
        setTimeout(loop, 3000);  // call myself in 3 seconds time if required
    }
};  

Autocomplete.prototype.filterCategory = function(e) {
    this.input.addEventListener("keyup", (e) => {
        let inputVal = this.input.value,
            patt = new RegExp(inputVal);

        for (var i = 0; i < this.categories.length; i++) {
            if(!patt.test(this.categories[i].dataset.cat)){
                //this.categories[i].style.display = "none";
                console.log('none');
                loop(this.categories[i], 'none');
            }

            else {console.log('block');
                loop(this.categories[i], 'block');
            }
        }

    });
}

简短的HTML：

<div class="category" data-cat="programmer, sales, manager">
    <p class="h-text-cap">sales</p>
    <a class="btn btn__open btn__open--blue" href="">more</a>
</div>

<div class="category" data-cat="programmer, sales, manager, vendor">
    <p class="h-text-cap">sales</p>
    <a class="btn btn__open btn__open--blue" href="">more</a>
</div>

<div class="category" data-cat="programmer, sales, manager, carpenter">
    <p class="h-text-cap">capenter</p>
    <a class="btn btn__open btn__open--blue" href="">more</a>
</div>

<div class="category" data-cat="programmer, sales">
    <p class="h-text-cap">sales</p>
    <a class="btn btn__open btn__open--blue" href="">more</a>
</div>

更新后的代码：

function loop(s, val) {
    s[i].style.display = val;
    if (++y < s.length) {
        setTimeout(loop(s, val), 3000);  // call myself in 3 seconds time if required
    }
};  

Autocomplete.prototype.filterCategory = function(e) {
    this.input.addEventListener("keyup", (e) => {
        let inputVal = this.input.value,
            patt = new RegExp(inputVal),
            newA = [];

        for (var i = 0; i < this.categories.length; i++) {
            if(!patt.test(this.categories[i].dataset.cat)){
                newA.push(this.categories[i]);
                loop(newA, 'none');
            }

            else {
                loop(this.categories[i], 'block');
            }
        }

    });
}

我没有定义

通过键入作业标题“程序员”，我希望隐藏所有不具有该值的数据cat。目前它在逻辑方面工作正常，但是它们都被隐藏或显示在一个块中，而不是单独具有3s延迟。