Таймер при наведении на блок и обратный таймер после выхода курсора из области

Доброго времени суток. Несколько часов "бьюсь" головой и думаю, как сделать, чтобы при наведении на блок запускался таймер, а после вывода курсора из блока запускался обратный Т.е нужно Чтобы при наведении на блок через секунду добавился класс number_1, через две number_2 и т.д. (это все легко решается с помощью setTimeout) Но нужно чтобы если человек вывел курсор за область блока, начинался обратный отсчет Т.е если последним было number_4, он начинал удалить классы, через 1 секунду number_4, через 2 number_3 и т.д

Ответ

Пожалуйста - https://jsfiddle.net/knvnckbz/4/
var div = document.querySelector('div'), addTimeout = null, removeTimeout = null, classNames = []; div.addEventListener('mouseover', addClass); div.addEventListener('mouseout', removeClass); function addClass() { clearTimeout(removeTimeout); var className = 'number_' + (classNames.length); div.classList.add(className); classNames.push(className); addTimeout = setTimeout(addClass, 1000); } function removeClass() { clearTimeout(addTimeout); var className = classNames.pop(); if (!className) return; div.classList.remove(className); removeTimeout = setTimeout(removeClass, 1000); } div { width: 100px; height: 100px; background: black; } .number_1 { background: red; } .number_2 { background: blue; } .number_3 { background: yellow; }