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

3 回答 3

2

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

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' });
    });
}
于 2013-10-11T14:36:23.277 回答
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;
}
}
于 2013-10-11T14:34:00.383 回答
0

终于找到答案了，必须在动画前加上 :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' });
    });
}
于 2013-10-11T18:16:03.080 回答