Таймеры в .addEventListener не работают?

Question

Я пытаюсь преобразовать небольшой фрагмент jQuery в vanilla JS, и я не могу заставить таймеры работать в пределах .addEventListener.

Я не уверен, что они могут работать какthis.

Я загрузил свою работу в 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 для Vanilla:

/* 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

Проверьте приведенный ниже фрагмент кода:

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

for (var i = 0; i < spans.length; i++) {
    spans[i].addEventListener( 'click', function () {
        var elem = this.parentElement;
        elem.classList.add( 'fadeOut' );
        setTimeout( function () { elem.parentElement.removeChild( elem ) }, 600)
    });
}

.fadeOut {
    opacity: 0;
    transition: all 0.6s;
    -webkit-transition: all 0.6s
}

<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>

Но вам не нужно использовать таймер для сокрытия <li> elemenys. Просто добавьте height: 0 в свой CSS:

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

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

.fadeOut{
  height: 0;
  opacity: 0;
  transition: all 0.6s;
  -webkit-transition: all 0.6s
}

<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 2

Я хочу поблагодарить @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 и преобразовал его в ES5, используя элементы предложения @Kavian K. и переключил setInterval, который вызывал у меня проблемы, на setTimeout, который исправилвыпуски.

Спасибо, ребята, теперь работает гладко!

G

Answer 3

Вот рабочее решение, основанное на предложении @ powerbuoy:

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

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

    });
}