Блог

Я пытаюсь приостановить прослушиватель событий этой анимации, которую я сделал так, чтобы событие click не запускало другую анимацию, пока не будет завершена предыдущая. Я пытался использовать логические значения (как в примере), но я не понимаю, почему это не сработает.

Примечание: невозможно использовать jquery.

Пример: Jsfiddle

 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 );
        };
    } );

} );
  

Проблема в том, что вы suspend сразу устанавливаете значение true в своей функции обратного вызова. Вы можете установить тайм-аут внутри функции обратного вызова и установить suspend значение true примерно через 250 мс (длина / скорость анимации). Обновленная скрипка

 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 документация,
Я придумал лучший способ справиться с ситуацией, с которой вы столкнулись. Вместо использования тайм-аута вы можете добавить функцию обратного вызова в свою easeout-анимацию, например, этот обновленный 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 документы