防止在点击触发时复制jquery动画，而不是在一定持续时间后

Question

我有一个在页面顶部出现的通知栏，然后在xx秒后执行一次slideOut。我也有一个图标，可以点击它来加速slideOut。

问题是，如果按下按钮，动画就会发生两次。单击后消失，然后在xx秒后出现并再次执行slideOut。

我想我需要用不同的方式来写这段代码来绑定事件？或者我需要添加一个if语句？

<script type="text/javascript">
Ext.onReady(function() {
  hideNotification.defer(7000);
});
var hideNotification = function () {
  Ext.get('notification-bar').slideOut('t', {duration:0.5, easing:'easeOut'});
  Ext.get('notification-hide-button').setDisplayed(false);
}
$("#notification-hide-button").click(function() {
  hideNotification();
});
</script>

Answer 1

您可以只使用window.setTimeout function..like

var hideTimeout = window.setTimeout(hideNotification, 700);

然后将这个添加到hideNotification函数中

window.clearTimeout(hideTimeout);

这将在您单击按钮后删除方法的延迟调用。