Блог

Главная - Вопросы по программированию - Как мне отложить функцию для затухания?

Как мне отложить функцию для затухания?

#jquery #function #methods #fadeout

#jquery #функция #методы #затухание

Вопрос:

У меня есть эта функция:

     $('#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, который удаляет строку из таблицы (корзины покупок). Я думаю, что удаление происходит быстрее, чем эффект. Как я могу правильно отложить удаление элемента корзины, чтобы увидеть эффект затухания?

Спасибо,

Ответ №1:

fadeOut Метод jQuery принимает функцию обратного вызова в качестве второго параметра, который является необязательным. Функция обратного вызова выполняется, когда анимация заканчивается. Таким образом, вы можете выполнить 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);
  });
})

Комментарии:

1. Однако это изменяет код. Теперь он не удаляет нужный элемент, всегда первый. Во-вторых, он перенаправляет пользователя на сайт PayPal. У меня есть кнопка на этой странице, которая делает это, но теперь она автоматически делает это при удалении. Должен ли я обратиться к другому разделу, чтобы исправить это, или мы можем что-то сделать с затуханием? Исходный код работает правильно.

2. Я допустил ошибку в коде, т.Е. Функция this внутри стрелки ссылалась на window , а не на элемент. Я это исправил. Теперь оба кода одинаковы 🙂

3. Спасибо, теперь он удаляет нужный элемент. Единственное, чего я не понимаю, почему исходный код запускает проверку PayPal, если я нажимаю кнопку, а версия fadeOut запускает проверку при удалении, даже если я этого не хочу.

4. @DarkArchon Я не думаю, что код перенаправления присутствует в функции обратного вызова. Где-то еще может быть какой-то код запуска. Может присутствовать внутри outputCart или handleCartButton .

5. Да, мне пришлось удалить статическую форму PayPal со страницы, а также добавить ее из JS. Спасибо!