提交时仅调用一次函数

Question

I am trying to submit a form and while submitting I call a function which is myOwnFun and it runs. But if I keep pressing enter for long time, form submit repeats which I don't want.

Here is the code..

<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')
}

I want to run this function only one time when I press enter even if I pressed for longer time. And I need to submit the form many different times.

Answer 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> 

Answer 2

首先在脚本中然后在代码中使用e.preventDefault()方法，这将禁用表单和执行代码的默认功能。

Answer 3

Try this:

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')
        }
    };

}

Answer 4

you can use that: form.removeEventListener("submit", yourFunction);

I think you'll have to change function(e) to a "real function" to make it work

Answer 5

As a "throw a library/package at it" solution, Lodash has a once function that restricts the function to one call per page load: https://lodash.com/docs/4.17.11#once . Might be a bit overkill, especially if you just need it in the one line, so I would recommend it as a last resort, even if you go with the standalone package.