Остановить прокрутку по каждой нажатой ссылке один за другим, прокрутить только до первой нажатой ссылки

Question

Мне нужно исправить свой код. Если я нажму на более чем одну html ссылку href в меню, мой скрипт будет прокручивать каждую ссылку по клику один за одним нажатием ссылки. Мне нужно прокрутить только до первой нажатой ссылки, а другие щелкнутые ссылки во время прокрутки будут проигнорированы.

jQuery(window).bind("load", function() { 
var hash = window.location.hash; 

hash = hash.replace("#", ""); 

var elem = jQuery(".pb-line-css-group-" + hash); 

menu_scroll_to(elem); 
}); 

jQuery(document).ready(function() { 

jQuery(".menu-item A").click(function() { 
    var hash = jQuery(this).attr('href'); 

    hash = hash.replace("#", ""); 
    hash = hash.replace("/", ""); 

    var elem = jQuery(".pb-line-css-group-" + hash); 

    menu_scroll_to(elem); 
}); 
}); 

function menu_scroll_to(elem) { 

if (elem) { 
    jQuery('html, body').animate({ 
     scrollTop: elem.offset().top - 70 
    }, 2000, "easeOutQuint"); 
} 

} 

Answer 1

Вы можете настроить функцию дребезга, так что вы только позвоните menu_scroll_to() один раз для нескольких щелчков мыши в течение заданного периода времени.

Вот ссылка на функцию debounce, которая должна работать.

Debounce function

добавить эту функцию в ваших JS и замените следующую строку:

menu_scroll_to(elem); 

с:

debounce(function() { 
    menu_scroll_to(elem); 
}, 250); 

где 250 это время в миллисекундах.

окончательный код все вместе будет что-то вроде этого:

jQuery(window).bind("load", function() { 
     var hash = window.location.hash; 

     hash = hash.replace("#", ""); 

     var elem = jQuery(".pb-line-css-group-" + hash); 

     menu_scroll_to(elem); 
}); 

jQuery(document).ready(function() { 

     jQuery(".menu-item A").click(function() { 
       var hash = jQuery(this).attr('href'); 

       hash = hash.replace("#", ""); 
       hash = hash.replace("/", ""); 

       var elem = jQuery(".pb-line-css-group-" + hash); 

       debounce(function() { 
        menu_scroll_to(elem); 
       }, 250); 
     }); 
}); 

function menu_scroll_to(elem) { 
    if (elem) { 
      jQuery('html, body').animate({ 
        scrollTop: elem.offset().top - 70 
      }, 2000, "easeOutQuint"); 
    } 
}; 

function debounce(func, wait, immediate) { 
    var timeout; 
    return function() { 
     var context = this, args = arguments; 
     var later = function() { 
      timeout = null; 
      if (!immediate) func.apply(context, args); 
     }; 
     var callNow = immediate && !timeout; 
     clearTimeout(timeout); 
     timeout = setTimeout(later, wait); 
     if (callNow) func.apply(context, args); 
    }; 
};