JavaScript setTimeout () не работает с атрибутом формы "onsubmit" - PullRequest
Новая
       20

JavaScript setTimeout () не работает с атрибутом формы "onsubmit"

0 голосов
/ 12 мая 2019

Я очень новичок в JavaScript, поэтому извиняюсь, если упускаю что-то очевидное.

Я пытаюсь отобразить скрытый div при отправке формы, но вместо того, чтобы отображать его немедленно, он должен появиться с небольшой задержкой (например, 3 секунды).

Я пытался использовать setTimeout() в атрибуте 'onsubmit', но скрытый div появляется сразу, а не с задержкой.

Вот минимальный пример: 

<!DOCTYPE html>
<html>

<body>

  <p>When you submit the form, a function is triggered which alerts some text.</p>

  <form action="/action_page.php" onsubmit="setTimeout(myFunction(), 3000)">
    Enter name: <input type="text" name="fname">
    <input type="submit" value="Submit">
  </form>

  <div id="message" style="display: none">Loading...</div>

  <script>
    function myFunction() {
      document.getElementById("message").style.display = "block"
    }
  </script>

</body>

</html>

Также доступно здесь: https://www.w3schools.com/code/tryit.asp?filename=G3Y3E1YISNH1

Подводя итог, можно сказать, что setTimeout() выполняет myFunction, но не с ожидаемой задержкой.Буду очень признателен, если кто-нибудь поможет мне правильно понять мой код, пожалуйста!Благодаря.

Ответы [ 4 ]

4 голосов
/ 12 мая 2019

использовать современные соглашения JS. На стороне JS, а не на стороне HTML, найдите свою форму и используйте прослушивание событий: 

let form = ... // there are many easy ways to get this element

form.addEventListener("submit", evt => {
  // don't actually submit this form to its associated URL:
  evt.preventDefault();
  // and schedule the timeout
  setTimeout(myFunction, 3000);
});
3 голосов
/ 12 мая 2019

Вы должны отправить функцию, чтобы сделать функцию. Либо использовать: 

onsubmit="setTimeout('myFunction()', 3000)"

Или используйте этот способ: 

onsubmit="setTimeout(function () { myFunction(); }, 3000)"

Кроме того, если вы не отправляете форму, вы можете попробовать сделать return false: 

onsubmit="setTimeout(function () { myFunction(); }, 3000); return false;"

И, пожалуйста, используйте ненавязчивый метод, используя addEventListener.

0 голосов
/ 12 мая 2019

Вы вызываете myFunction вместо передачи функции в качестве обратного вызова на setTimeout.изменить его setTimeout(myFunction(), 3000) ---> setTimeout(myFunction, 3000)

Спасибо

0 голосов
/ 12 мая 2019

Вы выполняете функцию во время назначения. Снять скобки (). Вам действительно нужно передать ссылку на функцию в качестве параметра. При добавлении скобок вы выполняете функцию, а затем передаете возвращаемое значение функции в качестве параметра. 

<form onsubmit="setTimeout(myFunction, 3000)">

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

...