阻止腳本在執行時運行兩次

我有一個我正在使用的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

阻止腳本在執行時運行兩次

回答

相關問題