JQuery переключения, предотвращение нажатия во время переключения

Question

Учитывая следующий код JQuery ..

jQuery.fn.sliding = function() { 

    return this.each(function() { 

     $(this).bind('ON_CONTENT_CHANGING', function (e) { 
      $(this).block({ 
       overlayCSS: { opacity: 1, color: '#000' }, 
       timeout: 800 
      }); 
     }); 

     $(this).bind('ON_CONTENT_CHANGED', function (e) { 
      $(this).sliding(); 
      $(this).unblock(); 
     }); 

     var $panels = $(this).find('.scrollContainer > div'); 
     var $container = $(this).find('.scrollContainer'); 
     var $resized = $panels.css({ 'width': $(this).width() - 44 }); 



     // if false, we'll float all the panels left and fix the width 
     // of the container 
     var horizontal = true; 

     // float the panels left if we're going horizontal 
     if (horizontal) { 
      $panels.css({ 
       'float': 'left', 
       'position': 'relative' // IE fix to ensure overflow is hidden 
      }); 

      // calculate a new width for the container (so it holds all panels) 
      $container.css('width', $panels[0].offsetWidth * $panels.length); 
     } 

     // collect the scroll object, at the same time apply the hidden overflow 
     // to remove the default scrollbars that will appear 
     var $scroll = $(this).find('.scroll').css('overflow', 'hidden'); 

     // handle nav selection 
     function selectNav() { 
      $(this) 
      .parents('ul:first') 
       .find('a') 
        .removeClass('selected') 
       .end() 
      .end() 
      .addClass('selected'); 
     } 

     $(this).find('.navigation').find('a').click(selectNav); 


     // go find the navigation link that has this target and select the nav 
     function trigger(data) { 
      var el = $(this).find('.navigation').find('a[href$="' + data.id + '"]').get(0); 
      selectNav.call(el); 
     } 

     if (window.location.hash) { 
      trigger({ id: window.location.hash.substr(1) }); 
     } else { 
      $('ul.navigation a:first').click(); 
     } 

     // offset is used to move to *exactly* the right place, since I'm using 
     // padding on my example, I need to subtract the amount of padding to 
     // the offset. Try removing this to get a good idea of the effect 
     var offset = parseInt((horizontal ? $container.css('paddingTop') : $container.css('paddingLeft')) || 0) * -1; 


     var scrollOptions = { 
      target: $scroll, // the element that has the overflow 

      // can be a selector which will be relative to the target 
      items: $panels, 

      navigation: '.navigation a', 

      // allow the scroll effect to run both directions 
      axis: 'xy', 

      onAfter: trigger, // our final callback 

      offset: offset, 

      // duration of the sliding effect 
      duration: 500, 

      // easing - can be used with the easing plugin: 
      // http://gsgd.co.uk/sandbox/jquery/easing/ 
      easing: 'swing' 
     }; 

     $(this).serialScroll(scrollOptions); 
     $.localScroll(scrollOptions); 

     scrollOptions.duration = 1; 
     $.localScroll.hash(scrollOptions); 

    }); 
}; 

Тогда это реальный HTML файл ...

$('#toggle').toggle(function (e) { 
     if ($("#sidebar:animated, #canvas:animated").length) { 
      e.preventDefault(); 
      return; 
     } 

     $(".ui-sliding").trigger('ON_CONTENT_CHANGING'); 


     $('#sidebar').hide('slide', { direction: 'right' }, 100, function() { 

      $('#canvas').switchClass('span-17', 'span-24', 100, function() { 
       $(".ui-sliding").trigger('ON_CONTENT_CHANGED'); 
       $('#toggle').switchClass('close', 'open'); 
      }); 
     }) 
    }, 
      function (e) { 
       if ($("#sidebar:animated, #canvas:animated").length) { 
        e.preventDefault(); 
        return; 
       } 


       $(".ui-sliding").trigger('ON_CONTENT_CHANGING'); 

       $('#canvas').switchClass('span-24', 'span-17', 100, function() { 
        $('#sidebar').show('slide', { direction: 'right' }, 100, function() { 
         $(".ui-sliding").trigger('ON_CONTENT_CHANGED'); 
         $('#toggle').switchClass('open', 'close'); 
        }); 
       }); 
      }); 

Есть ли способ, чтобы предотвратить пуговицу от если кто-то щелкнет во время выполнения функции?

Я ссылался на Tell jQuery to ignore clicks during an animation sequence, и техника не сработала.

Answer 1

Вы можете сделать что-то вроде этого, проверить, оживляет ли что-нибудь, что вы оживляете, и отменить, если это так.

Put это в верхней части каждой функции переключения:

if($("#sidebar:animated, #canvas:animated").length) { 
    e.preventDefault(); 
    return; 
} 

Answer 2

var toggling = false 
$('#toggle').toggle(function() { 
if(!toggling) 
{ 
toggling = true; 
    // perform something 
toggling = false; //or put it in a callback function of animate,show,hide,slide and fade 
} 
}, function() { 
if(!toggling) 
{ 
toggling = true; 
    // perform something 
toggling = false; //or put it in a callback function of animate,show,hide,slide and fade 
} 
});