Предотвращение работы функции для множества нажатий

Question

Извините за вводящий в заблуждение заголовок его трудно объяснить!

В принципе у меня есть функция, которая при нажатии левой/правой кнопки div перемещает X пикселей в любом направлении.

// Upcoming events slide 
$('.nextEvent').click(function(e){ 
    e.preventDefault(); 
    if($('.newsColWrap').offset().left == '597.5'){ 

    } else { 
     $('.newsColWrap').stop(true,true).animate({'left' : "-=435px"},500) 
    } 
}); 
$('.prevEvent').click(function(e){ 
    e.preventDefault(); 
    if($('.newsColWrap').offset().left == '1032.5'){ 

    } else { 
     $('.newsColWrap').stop(true,true).animate({'left' : "+=435px"},500); 
    } 
}); 

Функция работает отлично, но если анимации происходит, и вы снова нажмите, потому что, если оператор не возвращает мой ДИВ двигается слишком далек, это имеет смысл?

Answer 1

Вы можете проверить, анимирован ли элемент, используя :animated перед его оживлением.

$('.nextEvent').click(function(e){ 
    e.preventDefault(); 
    if($(this).is(':animated')) return; // check if currently being animated 
    // ... animate 
}); 

$('.prevEvent').click(function(e){ 
    e.preventDefault(); 
    if($(this).is(':animated')) return; // check if currently being animated 
    // ... animate 
}); 

Answer 2

Проблема может быть, что вы читаете смещение до предыдущей анимации завершена, поэтому постарайтесь

$('.nextEvent').click(function (e) { 
    e.preventDefault(); 
    var $newsColWrap = $('.newsColWrap').stop(true, true); 
    if ($newsColWrap.offset().left == '597.5') { 

    } else { 
     $newsColWrap.animate({ 
      'left': "-=435px" 
     }, 500) 
    } 
}); 
$('.prevEvent').click(function (e) { 
    e.preventDefault(); 
    var $newsColWrap = $('.newsColWrap').stop(true, true); 
    if ($newsColWrap.offset().left == '1032.5') { 

    } else { 
     $newsColWrap.stop(true, true).animate({ 
      'left': "+=435px" 
     }, 500); 
    } 
}); 

Answer 3

Вы можете использовать простую функцию SetTimeout работает на 500.