Question

我试图暂停这个动画的事件监听器我做了这样的点击事件不会触发另一个动画，直到前一个动画完成。我尝试使用布尔值（如示例中所示），但我不明白为什么它不起作用。

注意：不能使用jquery。

var speed = 250,
suspend = true;

[].slice.call( document.querySelectorAll( '.arrow_button' ) ).forEach( function( el ) {

    var s = Snap( el.querySelector( 'svg' ) ),
        path = s.select( 'path' ),
        returnPath = path.attr('d'),
        route = el.getAttribute( 'data-path-route' ),
        callback = function () {
            path.animate( { 'path' : returnPath }, speed, mina.easeout );
            suspend = true;
        };

    el.addEventListener( 'click', function() {
        if( suspend ) {
            suspend = false;
            path.animate( { 'path' : route }, speed, mina.easein, callback );
        };
    } );

} );

Answer 1

问题是您在回调函数中立即将suspend设置为true。您可以在回调函数内设置超时，并在约250ms（动画的长度/速度）后将suspend设置为true。 Updated fiddle

var speed = 250,
suspend = true;

[].slice.call( document.querySelectorAll( '.arrow_button' ) ).forEach( function( el ) {

    var s = Snap( el.querySelector( 'svg' ) ),
        path = s.select( 'path' ),
        returnPath = path.attr('d'),
        route = el.getAttribute( 'data-path-route' ),
        callback = function () {
            path.animate( { 'path' : returnPath }, speed, mina.easeout );
            setTimeout(function(){
                 suspend = true;      
            },speed)
        };

    el.addEventListener( 'click', function() {
        if( suspend ) {
            suspend = false;
            path.animate( { 'path' : route }, speed, mina.easein, callback );
        };
    } );

} );

编辑：仔细查看snapsvg.io的文档后，我想出了一个更好的方法来处理你所面临的情况。您可以在您的简易动画中添加回调函数，而不是使用超时，例如updated plunkr：

var speed = 250,
    suspend = true;
[].slice.call( document.querySelectorAll( '.arrow_button' ) ).forEach( function( el ) {
    var s = Snap( el.querySelector( 'svg' ) ),
        path = s.select( 'path' ),
        returnPath = path.attr('d'),
        route = el.getAttribute( 'data-path-route' ),
        callback = function () {
            path.animate( { 'path' : returnPath }, speed, mina.easeout, function(){
               suspend=true;
            });
        };
    el.addEventListener( 'click', function() {
  console.log("test",suspend);
        if( suspend ) {
            suspend = false;
            path.animate( { 'path' : route }, speed, mina.easein, callback );
        };
    } );
} );

动画结束时将调用此回调函数，因此无需设置自己的超时。来自snapsvg.io docs

Snap SVG：在动画过程中暂停事件监听器

1 个答案: