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

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。您可以在回调函数中设置超时，并在大约 250 毫秒（动画的 length/speed）后将 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：在动画过程中暂停事件监听器

Snap SVG: Suspending an event listener during the course of an animation

javascript

snap.svg