javascript - .addEventListener 中的计时器不起作用？

Question

我正在尝试将一小部分 jQuery 转换为普通 JS，但我似乎无法让计时器在 .addEventListener 中工作。

我不确定它们是否可以像这样工作。

我已将我的作品上传到 Plunkr，JS 中的灰色代码是 Vanilla JS。

https://embed.plnkr.co/up5i33T4LfTmpXhy86wM/

除了延迟之外，一切正常，它会跳过延迟，就好像它不存在一样。

这是效果很好的 jQuery 版本:

//jQuery VERSION
$("span").click(function (e) {
    $(this).parent().fadeOut(500, function(){
        $(this).remove();
    });
    e.stopPropagation();
});

这是我的普通尝试:

//JavaScript Version - DOESNT WORK!!!
var spans = document.querySelectorAll("span");

for (var i = 0; i < spans.length; i++) {
    spans[i].addEventListener("click", function () {
        this.parentElement.classList.add("fadeOut");
        setInterval(test(this), 2000);

    });
}

function test(event){
    console.log(event);
    event.parentElement.outerHTML = "";
};

原版的 CSS 是:

/* STYLES FOR JS */
.fadeOut{
    opacity: 0;
    transition: all 0.6s;
    -webkit-transition: all 0.6s;
}

所操作的 HTML 非常简单:

<div id="container">
       <h1>TO-DO LIST</h1>
       <input type="text">
       <ul>
           <li><span>X</span> Go to Potions Class</li>
           <li><span>X</span> Buy New Robes</li>
           <li><span>X</span> Visit Hagrid</li>
       </ul>

   </div>

Answer 1

我要感谢@powerbuoy、@tryzniak 和@Kavian K。

我使用了您的所有答案，并将以下内容组合在一起，效果非常好:

var spans = document.querySelectorAll("span");

for (var i = 0; i < spans.length; i++) {
    spans[i].addEventListener("click", function () {
        var _this = this;
        _this.parentElement.classList.add("fadeOut");
        setTimeout(function () {
            _this.parentElement.outerHTML = "";
        }, 500);

    });
}

我使用了@tryzniak，并使用@Kavian K.建议的元素将其转换为ES5，并将给我带来问题的setInterval切换为解决了问题的setTimeout。

谢谢大家，现在工作顺利了!

G