如何延迟 fadeOut 的功能？

Question

我有这个功能：

    $('#output').on('click', '[data-action="DELETE_ITEM"]', function () {
            var itemInfo = $(this.dataset)[0];
            var buttonOfProductHTML = document.querySelector(`[data-id='${itemInfo.id}']`);
            var buttonOfDeletion = document.querySelector('[data-action="DELETE_ITEM"]');
            $(buttonOfDeletion.parentElement.parentElement).fadeOut(1000);
            var itemIndex = $('[data-action="DELETE_ITEM"]').index(this);
            cart.splice(itemIndex, 1);
            sessionStorage['shopCart'] = JSON.stringify(cart);
            outputCart();
            handleCartButton(buttonOfProductHTML, 0);
        })

如果我从 cart.splice 中删除代码（从 table（购物车）中删除一行），我只会看到淡出效果。我猜删除方式比效果更快。如何正确延迟购物车项目的移除以查看淡出效果？

谢谢，

Answer 1

jQuery的fadeOut方法，接受一个回调函数作为第二个参数，这是可选的。回调函数在动画结束时执行。因此，您可以执行 fadeOut 并将所有代码放入该回调函数中。 :)

$('#output').on('click', '[data-action="DELETE_ITEM"]', function() {
  var itemInfo = $(this.dataset)[0];
  var that = this;
  var buttonOfProductHTML = document.querySelector(`[data-id='${itemInfo.id}']`);
  var buttonOfDeletion = document.querySelector('[data-action="DELETE_ITEM"]');
  $(buttonOfDeletion.parentElement.parentElement).fadeOut(1000, () => {
    var itemIndex = $('[data-action="DELETE_ITEM"]').index(that);
    cart.splice(itemIndex, 1);
    sessionStorage['shopCart'] = JSON.stringify(cart);
    outputCart();
    handleCartButton(buttonOfProductHTML, 0);
  });
})

如何延迟 fadeOut 的功能？

How do I delay a function for fadeOut?

methods

jquery

function

fadeout