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

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

来源

2013-10-11 user934902

尝试把.stop（）.animate（）之前 –

试过了，不起作用，因为当用户点击它时，调用必须进行计算的函数（var item_width），所以当用户多次点击时，它会重新计算 – user934902

好点。我会尝试59的建议 –

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-11 14:34:00 Tauseef

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

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-11 14:36:23

即时通讯不想阻止动画，即时通讯寻找防止功能计算两次，然后显示不佳 – user934902

啊，我明白了。因此，如果左键单击两次，您希望动画完成一次，然后立即开始第二次？ –

这正是我想要完成的 – user934902

终于找到了答案，不得不添加：没有（：动画）的动画之前，为了防止动画从布莱恩我疯了

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-11 18:16:03 user934902

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

回答

相关问题