Как остановить setInterval при наведении курсора на элемент

Для небольшой задачи, где выполняется setInterval потребовалась его остановка, при наведении курсора мыши на блок, и запускать setInterval обратно, когда курсор уходит с элемента. Сейчас покажу, как я это сделал на jQuery.

Сначала я сделал так:
	// Остановка setInterval при наведении курсора на элемент
	$('.el').on('mouseover', () => {
		window.clearInterval(interval);

		// Запуск setInterval при уходи курсора с элемента
		$('.el').on('mouseleave', () => {
			interval = window.setInterval(fun, 8000);
		});
	});

Но, как оказалось, такое решение вызвало проблему многочисленных интервалов, то есть функция выполнялась одновременно несколько раз. Поискав в интернете, нашел подходящее решение, где подобной проблемы нет:
	// Остановка автоматической смены записи
	$('.el').hover(() => {
			window.clearInterval(interval);
		},
		() => {
			interval = window.setInterval(fun, 8000);
	}); // Остановка автоматической смены записи End

Вместо .el пишите свой класс, ID или название элемента.