JavaScript setTimeout（）函数不适用于“ onsubmit”表单属性
[英]JavaScript setTimeout() function not working on the “onsubmit” form attribute
问题描述
I am very new to JavaScript so apologies if I am missing something obvious. 
我对JavaScript非常陌生，所以如果我遗漏了一些明显的东西，我深表歉意。
I am trying to display a hidden div upon form submission but instead of having it displayed immediately it needs to appear with a slight delay (eg 3 seconds). 我正在尝试在提交表单时显示一个隐藏的div，但与其立即显示，不如将其显示稍有延迟（例如3秒）。
I have tried using the setTimeout() function on the 'onsubmit' attribute but the hidden div appears immediately and not with a delay. 我尝试在'onsubmit'属性上使用setTimeout（）函数，但是隐藏的div立即出现，并且没有延迟。
Here is a minimal example: 这是一个最小的示例：
<!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>
Also available here: https://www.w3schools.com/code/tryit.asp?filename=G3Y3E1YISNH1 也可以在这里找到： https : //www.w3schools.com/code/tryit.asp?filename=G3Y3E1YISNH1
So to summarise, setTimeout() is running myFunction but not with the expected delay. setTimeout() ， setTimeout()正在运行myFunction，但没有预期的延迟。 I'd be really grateful if someone could help me get my code right please! 如果有人可以帮助我正确编写代码，我将非常感激！ Thanks. 谢谢。
4 个解决方案
解决方案1
4 已采纳 2019-05-11 21:12:35
use modern JS conventions. 使用现代JS约定。 On the JS side, not the HTML side, find your form, and use event listening: 在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);
});
解决方案2
3 2019-05-11 21:12:29
You have to send a function to do a function. 您必须发送功能才能执行功能。 Either use: 可以使用：
onsubmit="setTimeout('myFunction()', 3000)"
Or use this way: 或使用这种方式：
onsubmit="setTimeout(function () { myFunction(); }, 3000)"
Also, for not making the form submit, you may try doing a return false : 另外，为了不提交表单，您可以尝试执行return false ：
onsubmit="setTimeout(function () { myFunction(); }, 3000); return false;"
And please use unobtrusive method by using addEventListener . 并且请通过使用addEventListener使用不引人注目的方法。
解决方案3
0 2019-05-11 21:12:45
You are executing the function during assignment. 您正在分配过程中执行该功能。 Remove the brackets () . 卸下支架() 。 You actually need to pass the reference to the function as a parameter. 实际上，您实际上需要将引用作为参数传递给函数。 When adding brackets, you are executing the function and then passing the return value of the function as a parameter. 添加括号时，您要执行函数，然后将函数的返回值作为参数传递。
<form onsubmit="setTimeout(myFunction, 3000)">
Furthermore, you should also not use onsubmit and inline assignments altogether. 此外，您也不应完全使用onsubmit和内联分配。 See this answer for more information. 有关更多信息，请参见此答案 。
解决方案4
0 2019-05-11 21:27:35
You are calling the myFunction instead of passing the function as callback to setTimeout . 您正在调用myFunction，而不是将函数作为回调传递给setTimeout 。 change it setTimeout(myFunction(), 3000) ---> setTimeout(myFunction, 3000) 更改它setTimeout(myFunction(), 3000) -> setTimeout(myFunction, 3000)
Thanks 谢谢
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.