2010-11-15 5 views
5

У меня есть сценарий, который я разрабатываю, что создает эффект типа скользящей кнопки. Пять div расположены рядом друг с другом, каждая со ссылкой. Когда один из этих DIVS нажимается на связанный контент, расширяется, а остальные части Div закрываются.Предотвращение выполнения Javascript дважды

Проблема заключается в том, что если пользователь дважды щелкает Div, когда он загружает или щелкает другое Div в быстрой последовательности, начинают появляться трещины.

Мне интересно, можно ли разрешить выполнение запроса только один раз и дождаться завершения, а не его очереди.

Вот мой текущий код, если это дерьмо не стесняйтесь комментировать, как я мог бы лучше ... Я не лучший в JavaScript/JQuery: P

function mnuClick(x){ 
    //Reset all elements 
    if($('#'+x).width()!=369){ 
     $('.menu .menu_Graphic').fadeOut(300); 
     $('.menu_left .menu_Graphic').fadeOut(300); 
     $('.menu_right .menu_Graphic').fadeOut(300); 
     $('.menu').animate({width: "76px"},500); 
     $('.menu_left').animate({width: "76px"},500); 
     $('.menu_right').animate({width: "76px"},500); 
    } 
     var ElementId = '#' + x; 

     $(ElementId).animate({ 
      width: 369 + "px" 
     },500, function(){ 
      $(ElementId + ' .menu_Graphic').fadeIn(300); 
     }); 
} 

Спасибо заранее, Крис.

ответ

9

Вам нужен флаг isRunning. Проверьте его перед началом работы. Установите его, когда вы начинаете последовательность, очистите ее, когда она закончится.

+1

+1 только то, что я собирался сказать, просто имеет переменную, которая отслеживает, было ли событие запущено, инициализируйте его перед началом обработки (так что он отключает все остальные события). – Jakub

+0

Большое спасибо. Отличное решение, но очень просто :) – Chris

3
(function() { 
var mutex = false; 

    function mnuClick(x){ 
     if (!mutex) { 
      mutex = !mutex; 

      /* all code here ... */ 

      mutex = !mutex; /* this statement should go into animation callback */ 
     } 

    } 

})(); 

означают сохранение состояния через переменную, так что вы не можете нажать кнопку несколько раз, пока код не полностью выполнен

0

вы можете создать невидимую MASKIN и maskout (как фон в лайтбокс и т.д.) или не отключить щелчки до тех пор, анимация заканчивается.

1

вы можете отключить обработчик события onClick (mnuClick) при запуске события, чтобы эффективно отключить вызов mnuClick дважды, но не забудьте восстановить его, когда событие закончится.

1

Быстрый ответ: используйте .addClass и .removeClass и проверьте существование класса во время выполнения. Проверьте, установлен ли он и верните, или добавьте его, выполните код, а затем удалите его.

Смежные вопросы