javascript - 防止脚本在执行时运行两次

Question

我有一个正在使用的 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' });
    });
}

Answer 1

您可以在再次运行动画之前验证该元素当前没有动画:

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

编辑: 尝试对计算和动画进行排队，以便它们在任何其他动画完成之前不会执行:

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