Артём Мáлков

Аналог (эквивалент) метода one() из jQuery для JavaScript

4 авг1 комм

В большинстве случаев, при разработке каких-то дополнений для сайтов, я использую jQuery, а не JavaScript ввиду её простоты. Несмотря на это, некоторые варианты решений я всё же переписываю и на чистом JavaScript, хотя бы для материалов из раздела «Статьи и советы».

Так, при написании очередной статьи (к слову, она была посвящена отложенной загрузке скриптов), при представлении варианта кода на JavaScript, я задался вопросом о том, каким образом можно воссоздать метод one() из jQuery для JavaScript, который, если вы помните, позволяет выполнить нужное действие только один раз:

$(document).one("click", function() {
	
	alert("Hello, world!");
	
});

Почитав документацию к методу addEventListener() из JavaScript, я увидел, что с некоторого времени в большинстве браузеров стал доступен параметр options со значением once: true, который как раз делает то, что нам и нужно (запускает указанный обработчик один раз):

document.addEventListener("click", function() {

	alert("Hello, world!");

}, {	
	once: true
});

Но это, как и с многими задачами, не единственный вариант решения данного вопроса.

Рекомендуем к просмотру
Как добавить несколько обработчиков событий addEventListener() к одному элементу в JavaScript?
Статьи и советы
Реализация методов fadeOut и fadeIn из jQuery на JavaScript
Модули и скрипты
Как сделать жирный текст (шрифт) в HTML/CSS/jQuery/JavaScript?
Статьи и советы
1
комментарий
Форма комментирования этого поста скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
    • 4
    1066
      •  Команда Pandoge
    4 авг в 02:35

    Ещё один неплохой вариант с использованием атрибута data (в примере data-triggered):

    document.querySelector("#link").addEventListener("click", function(el) {
    	
    	if(el.currentTarget.dataset.triggered) {
    
    		// Если атрибут = true - прекращаем дальнейшее выполнение кода
    	
    		return;
    		
    	}
    	
    	el.currentTarget.dataset.triggered = true;
    	
    	alert("Hello, world!");
    	
    });

    Здесь #link - ID нужного элемента, по нажатию на которого выполняется указанное действие.

Подняться наверх
«Pandoge» - помощник вебмастера