如何延迟淡出的功能？答案

【问题标题】：How do I delay a function for fadeOut?如何延迟淡出的功能？
【发布时间】：2021-01-26 01:58:33
【问题描述】：

我有这个功能：

    $('#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 中删除代码，我只会看到淡出效果，该代码会从表（购物车）中删除一行。我猜删除方式比效果快。如何正确延迟购物车项目的移除以查看淡出效果？

谢谢，

【问题讨论】：

标签： jquery function methods fadeout

【解决方案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);
  });
})

【讨论】：

但是，它改变了代码。现在，它不会删除正确的项目，总是第一个。其次，它将用户重定向到 PayPal 网站。我在此页面上有一个按钮可以执行此操作，但现在它会在删除时自动执行此操作。我应该看另一个部分来纠正这个问题，还是我们可以用淡出做点什么？原代码运行正常。
我在代码中犯了一个错误，即箭头函数内的this指的是window而不是元素。我已经纠正了。现在两个代码都是一样的:)
谢谢，它现在删除了正确的项目。唯一我不明白的是，为什么如果我按下按钮原始代码会启动 PayPal 结帐，即使我不想，fadeOut 版本也会在删除时启动结帐。
@DarkArchon 我认为回调函数中不存在重定向代码。在其他地方可能有一些触发代码。可能存在于outputCart 或handleCartButton 中。
是的，我必须从页面中删除静态 PayPal 表单，并从 JS 中添加它。谢谢！