Блог

Главная - Вопросы по программированию - Вызов функции только один раз при отправке

Вызов функции только один раз при отправке

#javascript #html #addeventlistener

#javascript #HTML #addeventlistener

Вопрос:

Я пытаюсь отправить форму, и во время отправки я вызываю функцию, которая есть myOwnFun , и она запускается. Но если я продолжаю нажимать enter в течение длительного времени, форма отправки повторяется, чего я не хочу.

Вот код..

 <form class="user__answer-form">
     <input type="text" name="useranswer" class="user__answer">
</form> 
 
 const form = document.querySelector('.user__answer-form');
const formAnswer = document.querySelector('.user__answer');

formAnswer.focus();

form.addEventListener('submit', function(e) {
   e.preventDefault();
   myOwnFun();
});


function myOwnFun() {
   console.log('show text one time in one Enter')
}

Я хочу запустить эту функцию только один раз, когда нажимаю enter, даже если я нажимал дольше. И мне нужно отправлять форму много раз.

Ответ №1:

 const form = document.querySelector('.user__answer-form');
const formAnswer = document.querySelector('.user__answer');

//create a counter to track key down events
let count  = 0;

formAnswer.focus();

form.addEventListener('submit', function(e) {
   e.preventDefault(); 
   //call your function only if count is 0 
   //ie is first time enter key is pressed 
   
   //if key is pressed for  a long time count > 0 
   // this condition fails
   if(count == 1){
     myOwnFun();
   }    
    
});

//fires on any key is pressed on form element
form.addEventListener('keydown', function(e) {
    // for cross browser compatibility
    const keyCode = e.which || e.keyCode;

   if(keyCode == 13){
      //if enter key is pressed update count 
      count   ;
   }
});

//fires on  key is released on form element
form.addEventListener('keyup', function(e) {

      const keyCode = e.which || e.keyCode;
      //if enter key is released reset the count
      if(keyCode == 13){
        count = 0
      }

});



function myOwnFun() {
    console.log('show text one time in one Enter');
} 
 <form class="user__answer-form" >
     <input type="text" name="useranswer" class="user__answer">
</form>

Комментарии:

1. Это работает, если я нажимаю Enter в первый раз, но мне нужно нажимать Enter много раз.

Ответ №2:

Попробуйте это:

 const form = document.querySelector('.user__answer-form');
const formAnswer = document.querySelector('.user__answer');

formAnswer.focus();

form.addEventListener('submit', function(e) {
   e.preventDefault();
   myOwnFun();
});


function myOwnFun() {
 var executed = false;
    return function() {
        if (!executed) {
            executed = true;
            console.log('show text one time in one Enter')
        }
    };

}

Ответ №3:

вы можете использовать это: form.removeEventListener("submit", yourFunction);

Я думаю, вам придется перейти function(e) на «реальную функцию», чтобы заставить ее работать

Ответ №4:

Сначала используйте e.preventDefault() метод в своем скрипте, а затем в своем коде, это отключит функциональность формы по умолчанию и выполнение вашего кода.

Комментарии:

1. Я уже добавляю e.preventDefault() внутри функции в addEventListener.

Ответ №5:

В качестве решения «бросить в нее библиотеку / пакет», Lodash имеет once функцию, которая ограничивает функцию одним вызовом на загрузку страницы: https://lodash.com/docs/4.17.11#once . Может быть немного излишним, особенно если вам это нужно только в одной строке, поэтому я бы рекомендовал это в качестве последнего средства, даже если вы используете автономный пакет.

Метки: