Почему не работает замыкание в jQuery.on()?

Question

[Вячеслав]

На learn.javascript.ru уведел пример замыкания:

function makeCounter() {
  var currentCount = 0;
     
  return function() {
    currentCount++;
    return currentCount;
  };
}
 
var counter = makeCounter();
 
// каждый вызов увеличивает счётчик
counter();
counter();
alert( counter() ); // 3

Почему когда counter() вставить в $('.txt').on('click'...) - не работает?

Пример:

$('.txt').on('click', function(){
	  	console.log($(this).text());
	  	counter();
	  });

		function makeCounter() {
		  var currentCount = 0;
		    currentCount++; 
		  return function() {	
		    return currentCount;
		  };
		}
		 
		var counter = makeCounter();	 
		// console.log(counter());

Мне нужно использовать подобное в проекте для того, чтобы сохранить в переменной последний элемент, по которому кликали, чтобы потом он был доступен глобально и другой функцией менять стили элемента.

Answer 1

[Никита Гущин]

Почему когда counter() вставить в $('.txt').on('click'...) - не работает?

Вы пытаетесь сделать замыкание на переменную, которой в этот момент еще нет. Соблюдайте логику выполнения - сначала определяем counter и лишь затем делаем на него замыкание:

function makeCounter() {
    var currentCount = 0;     
    return function() {
        return ++currentCount;
    };
}
		 
var counter = makeCounter();	

$('.txt').on('click', function(){
    console.log($(this).text());
    counter();
});

Если Вам нужно сохранить последний элемент, на который кликнули - код может выглядеть вот так:

$(function(){
    var $lastClicked;
    $('.txt').on('click', function(){
        $lastClicked = $(this);
    });
});

Главное помните - не засоряйте глобальную область видимости без особой необходимости.

Comments

[SlivTime]

У вас инкремент убежал из замыкания, так что счетчика не получается.

[Никита Гущин]

SlivTime: ой, и правда) я не глядя скопировал код автора) исправлюсь)