Где ошибка в этих 5 строчках?

Question

[Даниил]

Здравствуйте, на сайте после нажатия на ссылку, но перед открытием новой страницы необходимо выполнить действие (присвоить класс, который запустит анимация на 400мс), после окончания анимации необходимо перейти по адресу из ссылки. Написал функцию, но так как только учусь JS, то допустил ошибку, подскажите пожалуйста как ее починить и, возможно, усовершенствовать, если такое реально... Заранее благодарю!

$(".link").click(function(e){  //отслеживаем на какую ссылку из множества с классом link нажали
    e.preventDefault();  //отмена действия
	$("#page-wrapper").addClass("toback2"); // присвоение класса 
	setTimeout(function() { // задержка на время выполнения анимации
	location.href = this.href	// переход по оригинальной ссылке
	}, 400);
});

Comments

[Дмитрий]

Ошибка в том, что анонимная функция будет вызвана по таймауту НЕ в контексте функции обработчика клика. Поэтому она не будет знать что такое this, а по умолчанию это window.

Answer 1

[0xD34F]

Контекст потеряли. Делайте так:

setTimeout(() => location.href = this.href, 400);

Или так:

setTimeout(function() {
  location.href = this.href;
}.bind(this), 400);

Или так:

setTimeout(function(href) {
  location.href = href;
}, 400, this.href);

Answer 2

[Astrohas]

this походу переопределился. перед тамаутом сделайте присвоение self = this и используйте его

Comments

[Дмитрий]

Так делать - bad practice, потому что за время прохождения таймаута self может переопределиться.

[Astrohas]

Дмитрий, пожалуй соглашусь с вами