Date.now() и Settimeout, mouseleave при быстром переключении вызывается несколько раз одна и та же переменная, в чем проблема?

Question

[bod1kee]

countoftime = 0;
$('#js-navigation-bar > ul > li').mouseenter(function(){
	countoftime++;
	window['timer_'+countoftime] = Date.now();
	var target = $(this).children('ul');
	$(target).addClass('zzz-open');
}).mouseleave(function(){
	window['timer_'+countoftime] = window['timer_'+countoftime] - Date.now();
	if(window['timer_'+countoftime] >= 600){
		console.log(window['timer_'+countoftime]);
		var target = $(this).children('ul');
		$(target).removeClass('zzz-open');
		$(target).addClass('zzz-close');	
	}else{
		setTimeout(function(){
			console.log('timer_'+countoftime);
			countoftime = 0;
		},600 - window['timer_'+countoftime]);
	}
});

Есть код , при быстром переключении табов в менюшке , когда заходит в settimeout , то переменные не поочередно показываются а, все сразу, подскажите в чем проблема или какой нибудь аналог кода , если можно .
prntscr.com/gi2kr4

Comments

[kulaeff]

Будьте добры, поместите ваш код в соответствующий тег, чтобы была подсветка и какое-никакое форматирование.

[Teremokk]

Все равно не красиво.
Моя бабушка табуляцию лучше проставляет!

Answer 1

[Илья Герасимов]

Переменная
countoftime = 0; общая для нескольких табов, мб из-за этого?

Comments

[bod1kee]

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

[Илья Герасимов]

bod1kee, создает да, а вот то как она изменяется в mouseleave посмотрите внимательнее, вы явно ожидаете, что в mouseleave у вас в countoftime будет то значение, которое вы присвоили в mouseenter, но там стоит ожидать чего угодно при разных обстоятельствах, алгоритм не рабочий, я так понимаю нужно сделать чтобы, если я сразу ухожу с таба, он пропадал через 0.6 сек? если так, то посмотрите реализацию простым css (visible, transition, animation) это работает уже на многих браузерах, вариант с js нужно переписывать...

[bod1kee]

в том то и проблема , я отказался от css , так как там использовались keyframe анимации , если пользователь уберет мышку с таба до выполнения анимации , то выпадющий таб возвращается с бликом и если провести сразу по 3 табам , то на экране "цветомузыка" , поэтому был принят вариант ждать выполнения анимации , путем js , включая в себя если mouseleve то unbind'mouseenter'