开发者问题收集

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

2013-10-11
1693
javascript jquery carousel

我正在使用一个 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' });
    });
}
3个回答

您可以在再次运行动画之前验证元素当前是否正在执行动画： 

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' });
    });
}
Alex Wittig
2013-10-11
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;
}
}
Tauseef
2013-10-11

终于找到了答案，必须在动画之前添加 :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' });
    });
}
user934902
2013-10-11