Как сделать чтобы ховер эффект не повторялся?

Question

[antbelogurov]

Привет.

Я сделал анимацию svg при наведении.
Проблема в том, что если быстро провести над блоком несколько раз, то анимация будет проигрываться столько раз(что логично).
Как мне собственно сделать так, чтобы она проигрывалась 1 раз.

function correctHeightMenu(height, y) {
		$('#209718f4-8400-401d-a616-9240ede2e9de')
			.children()
			.eq(1)
			.siblings()
			.animate({
				height: height,
				y: y
			}, 300);
	}

	var menu = $('.js-toggle-menu');

	menu.hover(
		function () {
			correctHeightMenu(40, 0)
		},
		function () {
			correctHeightMenu(26, 14)
		}
	)

<a class="menu-icon js-toggle-menu" href="#">
            <div class="menu-icon__txt">Menu</div>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 40">
                <defs>
                    <style>.d2c5edd1-531d-4bb4-994b-aa20d1475918 {
                            fill: #373f48;
                        }</style>
                </defs>
                <g id="c168789e-c71a-4fea-b400-00b0095a9611">
                    <g id="209718f4-8400-401d-a616-9240ede2e9de">
                        <rect width="4" height="26" x="18" y="14" class="d2c5edd1-531d-4bb4-994b-aa20d1475918" style="display: inline-block; height: 26px; y: 14px;"></rect>
                        <rect width="4" height="40" x="9" class="d2c5edd1-531d-4bb4-994b-aa20d1475918"></rect>
                        <rect width="4" height="26" y="14" class="d2c5edd1-531d-4bb4-994b-aa20d1475918" style="display: inline-block; height: 26px; y: 14px;"></rect>
                    </g>
                </g>
            </svg>
        </a>

Answer 1

[Mors Clamor]

Устанавливать глобальную переменную типа Boolean, в которой хранить состояние

Answer 2

[Дмитрий Гололобов]

Используйте функцию debounce
Она позволяет ограничить количество запусков любой функции на определенный промежуток времени.

function debounce(f, ms) {
  let isRunning = false;
  return function() {
    if (isRunning) return;
    f.apply(this, arguments);
    isRunning = true;
    setTimeout(() => isRunning = false, ms);
  };
}

function myFunction {
  console.log('i am working');
}

const debouncedMyFunction = debounce(myFunction, 2000);

debouncedMyFunction(); // Выполнится
debouncedMyFunction(); // Будет проигнорирована

Comments

[antbelogurov]

Учитывая, что у меня jquery hover, который содержит 2 функции что-то я делаю не так наверное.Потому что это не работает

function debounce(f, ms) {
		let isRunning = false;
		return function() {
			if (isRunning) return;
			f.apply(this, arguments);
			isRunning = true;
			setTimeout(() => isRunning = false, ms);
		};
	}

	const debouncedMyFunction = debounce(menuHover, 2000);

	function correctHeightMenu(height, y) {
		$('#209718f4-8400-401d-a616-9240ede2e9de')
			.children()
			.eq(1)
			.siblings()
			.animate({
				height: height,
				y: y
			}, 300);
	}

	var menu = $('.js-toggle-menu');

	var menuHover = menu.hover(
		function () {
			correctHeightMenu(40, 0)
		},
		function () {
		correctHeightMenu(26, 14)
		}

	)