在滑动动画结束之前再次触发功能时，动画故障

Question

我使用以下脚本（以及外部animate.css），当我想显示特定通知时，我会调用这些脚本。这个想法很简单；触发时，动画 - （向下滑动）通知框以及更改的通知消息。时间出来时，再次动画（滑出）。一切正常，除了我在上一个呼叫正在动画时重新触发通知功能（在超时和开始滑动动画之间 - 请参见代码中的注释）。

// notification
var timer = '';
var notif = $('#notif');
var notif_txt = $('#notif #notif_txt');
var notif_orig = '#notif';
function err_notif(text = 'Prišlo je do napake!') {
  clearTimeout(timer);
  notif[0].style.display = 'none';
  notif_txt.text(text);
  notif[0].style.display = 'inline-block';
  anim(notif_orig, 'slideInDown', function() {
    timer = setTimeout(function(){
    // if user re-triggers the notif() function in time between mark 1 and 2, it glitches out the notification system
    // mark 1
      anim(notif_orig, 'slideOutUp', function(){
        // mark 2
        notif[0].style.display = 'none';

      });
    }, 1500);
  });
}

其他代码资源：

Animate.css用于CSS动画https://raw.githubusercontent.com/daneden/animate.css/master/animate.css

anim()函数（来自Animate.css的github页面）

function anim(element, animationName, callback) {
    const node = document.querySelector(element)
    node.classList.add('animated', animationName)
    function handleAnimationEnd() {
        node.classList.remove('animated', animationName)
        node.removeEventListener('animationend', handleAnimationEnd)
        if (typeof callback === 'function') callback()
    }
    node.addEventListener('animationend', handleAnimationEnd)
}

Answer 1

如果要预防同意的动画，则可以检查该元素是否已经具有animated类。

if(document.querySelector(notif_orig).classList.contains("animated")){
  console.log("Concurrent animation prevented.")
}else{
  anim(notif_orig, 'slideInDown', function() {
  //...
}