2013-10-11 6 views
1

У меня есть карусель jquery/javascript, который я использую, однако, если пользователь несколько раз нажимает кнопки навигации вправо или влево до завершения скрипта, он создает уродливую анимацию/винты вверх порядок карусели.Предотвращение запуска сценария дважды во время выполнения

Есть ли способ предотвратить повторное вызов этой функции (быстрый второй щелчок) во время ее выполнения?

$(document).ready(function() { 
     $('.inner-main li:first').before($('.inner-main li:last')); 
}); 

function mainSlide(direction) { 
    var item_width = 940; 

    if (direction == 'left') { 
     var movement = parseInt($('.inner-main').css('left')) + item_width; 
    } else { 
     var movement = parseInt($('.inner-main').css('left')) - item_width; 
    } 

    $('.inner-main').animate({ 'left': movement }, 800, function() { 
     if (direction == 'left') { 
      $('.inner-main li:first').before($('.inner-main li:last')); 
     } else { 
      $('.inner-main li:last').after($('.inner-main li:first')); 
     } 
     $('.inner-main').css({ 'left': '-940px' }); 
    }); 
} 
+0

попробовать положить .stop() перед .animate() –

+0

пробовал, не работает, потому что когда пользователь нажимает на него, вызывает функцию, которая должна выполнять вычисления (var item_width), поэтому, когда пользователь нажимает несколько раз, он продолжает пересчитывать – user934902

+0

ahh good point. Я бы попробовал 59-е предложение –

ответ

0
var flag = false; 
function mainSlide(direction) { 
if(!flag) 
{ 
flag = true; 
    var item_width = 940; 

    if (direction == 'left') { 
     var movement = parseInt($('.inner-main').css('left')) + item_width; 
    } else { 
     var movement = parseInt($('.inner-main').css('left')) - item_width; 
    } 

    $('.inner-main').animate({ 'left': movement }, 800, function() { 
     if (direction == 'left') { 
      $('.inner-main li:first').before($('.inner-main li:last')); 
     } else { 
      $('.inner-main li:last').after($('.inner-main li:first')); 
     } 
     $('.inner-main').css({ 'left': '-940px' }); 
    }); 
flag = false; 
} 
} 
2

Вы можете проверить элемент в данный момент не оживляющий перед повторным запуском анимации:

if(!$('.inner-main').is(':animated')) { 
    // animation code 
} 

Edit: Попробуйте очереди расчета и анимацию, так они не выполняют до тех пор, любая другая анимация:

function mainSlide(direction) { 
    $('.inner-main').queue(function() { 
     var item_width = 940; 

     if (direction == 'left') { 
      var movement = parseInt($('.inner-main').css('left')) + item_width; 
     } else { 
      var movement = parseInt($('.inner-main').css('left')) - item_width; 
     } 

     $('.inner-main').animate({ 'left': movement }, 800, function() { 
     if (direction == 'left') { 
      $('.inner-main li:first').before($('.inner-main li:last')); 
     } else { 
      $('.inner-main li:last').after($('.inner-main li:first')); 
     } 
     $('.inner-main').css({ 'left': '-940px' }); 
    }); 
} 
+0

im, не желая предотвращать анимацию, им нужно не допустить, чтобы функция вычислялась дважды, а затем плохо отображалась. – user934902

+0

А, я вижу. Итак, если левая кнопка дважды нажата, вы хотите, чтобы анимация закончилась один раз, а затем сразу начинайте второй раз? –

+0

Это именно то, что я пытаюсь выполнить – user934902

0

Наконец нашел ответ, должен был добавить: нет (: анимированный) перед одушевленных для того, чтобы предотвратить анимацию с ума творится на меня

function mainSlide(direction) { 
    var item_width = 940; 

    if (direction == 'left') { 
     var movement = parseInt($('.inner-main').css('left')) + item_width; 
    } else { 
     var movement = parseInt($('.inner-main').css('left')) - item_width; 
    } 

    $('.inner-main:not(:animated)').animate({ 'left': movement }, 800, function() { 
     if (direction == 'left') { 
      $('.inner-main li:first').before($('.inner-main li:last')); 
     } else { 
      $('.inner-main li:last').after($('.inner-main li:first')); 
     } 
     $('.inner-main').css({ 'left': '-940px' }); 
    }); 
} 
Смежные вопросы