Как уменьшить количество срабатываний события onmousewheel?

Question

[doctorcat]

Приветствую. Пытаюсь написать скрипт, который бы осуществлял скролл по секциям, впринцпе с задачей справился, но событие срабатывает слишком часто. Мне нужно чтобы человек крутя колёсико вниз переходил на 1 секцию, а он если сильно крутнул может перейти очень далеко.

viewPage = 0;
$(".team_company").hide();
//
screenarr = ["start","company","team_company","video_ipad","contacts","partners"];

document.onmousewheel = function (e) {
	console.log(e);
	console.log(e.deltaY);
	console.log(screenarr[viewPage]);
	
	if(e.deltaY>0) {
		viewPage++;
		if ($('\.'+screenarr[viewPage]).is(':hidden')) {
			viewPage++;
		};
		if(viewPage==screenarr.length){
		 console.log('noobs detect: '+viewPage);
			viewPage--;
		}
		else
			{
				$('html, body').animate({ scrollTop:  ($('\.'+screenarr[viewPage]).offset().top) }, 1000 );
			}
	};
	if(e.deltaY<0) {
		viewPage--;
		if ($('\.'+screenarr[viewPage]).is(':hidden')) {
			viewPage--;
		};
		if(viewPage<0){
		 console.log('noobs detect: '+viewPage);
			viewPage++;
		}
		else {
			$('html, body').animate({ scrollTop:  ($('\.'+screenarr[viewPage]).offset().top) }, 1000 );
		};
	};
	console.log(screenarr[viewPage]);
	e.preventDefault();
};

У меня есть скрытые блоки, но они идут не подряд и по этому там прокручивание если натыкается на скрытый блок - прокручивается ещё.
Прошу помощи у знатоков. Как бы ограничиить срабатывание события, например. После 1 срабатывания ещё 1-2 секунды не срабатывает, пока идёт анимация и так далее. Не могу понять как это реализовать. Благодарю если кто откликнется.

Answer 1

[Сергей Мельников]

// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
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);
	};
};

Usage:

var myEfficientFn = debounce(function() {
	// All the taxing stuff you do
}, 250);

window.addEventListener('resize', myEfficientFn);

https://davidwalsh.name/javascript-debounce-function

Comments

[doctorcat]

This answer beutiful. Thanks