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

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

Answer 2

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

Answer 3

终于找到了答案，不得不在动画之前添加：not（：animated）以防止动画对我疯狂

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