Question

我有一个脚本，当css3动画在jQuery中触发AnimationEnd时会删除一个元素。问题是这些动画绑定到可能未包含的外部css文件。

现在我称之为。

$element.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(event) {
    $(this).remove();
});

但是如果元素没有动画，因为浏览器不支持它或动画文件没有包含，我仍然需要删除元素。我怎样才能检查这是否被调用。

我试过这个，但似乎没有将值更改为true。

var hasAnimation = false;
$element.one('webkitAnimationStart oanimationstart msAnimationStart animationstart', function(event) {
        hasAnimation = true;
});
if (!hasAnimation) {
        $element.remove();
}

Answer 1

您在动画开始前检查hasAnimation，因为您没有放弃'时间片'。（这是错误的术语，但我认为'时间片'只描述了最新情况）

AFAIK没有Javascript实现 - preemtive - 多线程，至少不在脚本级别。所以如果你循环，你循环，没有其他事情发生。

想象一下将函数放在队列中的事件，这些事件会一个接一个地被触发/调用。表现得很好。因此，如果你想知道这种事件的结果是什么，你必须结束当前的功能（称之为放弃时间片）。现在活动开始了 - 现在是唯一的活动。

因此，如果您使用cleanup_if_no_animation( hasAnimation )将setTimeout(0)入队，只要StartAnimation不是带有setTimeout本身的触发器，您就不会真正玩游戏，你只需要放弃，然后在（可选的开始事件）后重新开始

你有同样的情况，如果你想cout到1000并把它放入DIV。您必须在步骤之间使用setTimeout（0）才能更新显示。

就像这个example

一样

function bad_loop() {
    for (i = 1; i < 100; ++i) {
        $('#out').text(i)
    } }

function good_loop(i = 1) { 
    $('#out').text(i)
    if (i<50) setTimeout(good_loop,0,i+1) }

检查元素是否具有css动画

1 个答案: