jQuery動畫完成功能

Question

我試圖做一個全屏部分滾動頁面。我已經能夠阻止默認的用戶滾動。現在，以取代我用下面的代碼：

var isAutoScrolling = false; 
$(window).off('scroll.fullscreen'); 
$(window).on('scroll.fullscreen', function() { 
    if (isAutoScrolling === false) { 
     isAutoScrolling = true; 
     $('html, body').animate({ 
      scrollTop: $(nextDiv).offset().top 
     }, '400', 'linear', function() { 
      console.log('animated'); 
      isAutoScrolling = false; 
     }); 
    } 
}); 

可惜的console.log寫「動畫」每次滾動的2倍。這怎麼可能？上面的代碼應該至少在2個console.logs之間做出400ms的中斷，對吧？任何人都在捕捉這個錯誤？

Answer 1

問題來自你對兩個元素HTML，身體結合事件。一些 瀏覽器然後將它發射兩次（其他一些具有這些可滾動的 元素中的一個，因此只發射一次）。

您可以使用promise接口和相關方法在瀏覽器中對其進行規範化。

$(window).on('scroll.fullscreen', function() { 
    if (isAutoScrolling === false) { 
     isAutoScrolling = true; 
     $('html, body').animate({ 
      scrollTop: $(nextDiv).offset().top 
     }, '400', 'linear').promise().done(function() { 
      console.log('animated'); 
      isAutoScrolling = false; 
     }); 
    } 
}); 

這是說，我想，而不是使用一個標誌，你可以使用 :animated僞選擇：

$(window).on('scroll.fullscreen', function() { 
    $('html, body').filter(':not(:animated)').animate({ 
     scrollTop: $(nextDiv).offset().top 
    }, '400', 'linear').promise().done(function() { 
     console.log('animated'); 
    }); 
}); 

（見@下面尼卡比曹的評論）