如何延迟表单提交答案

【问题标题】：How to delay form submission如何延迟表单提交
【发布时间】：2020-02-14 01:49:03
【问题描述】：

我正在为我的初级 Javascript 课程制作一个基本的网络表单。我几乎得到了所有预期的结果（作业包括输入验证和按名称将元素存储在数组中），除了当我提交表单时，我想从点击提交时延迟 5 秒到页面重定向的时间。这种延迟是为了让用户能够取消订单。

根据我们目前在课堂上学到的知识，我希望我可以使用 setTimeout 代码块来执行此操作 - 尽管我还没有能够做到这一点。我的表单提交取决于被调用函数的真/假返回值，我想延迟该真值，以免如此快速地命中。我附上了完整的 HTML 文件，但我想知道为什么它不能特别工作的代码块是这样的：

    setTimeout(function() {
                   return true;
               }, 5000);

我在 Chrome 中调试时观察到的第一个问题是它不会将 True 值返回给周围的代码。

我认为可以用 jQuery 做一些事情来规避这个问题，但我们还没有涵盖任何内容，所以我想避免走这条路。

```
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta name="description" content="Costello Improved">
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
    <title>Costellos Pasta and Pizza</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="costello.css">
</head>

<body>

    <form name="myForm" action="https://costello-pasta.glitch.me/order" id="myForm" method="POST" onsubmit="return calculateOrder(this)">
        <div class="container">

            <div class="row">
                <div class="col-md-12" id="debug">Costello's Online Orders</div>
            </div>

            <div class="row">
                <div class="col-md-4  label">Pasta Bowl</div>
                <div class="col-md-4"> (basic price: $7.50)</div>
                <div class="col-md-4"></div>
            </div>

            <div class="row">
                <div class="col-md-4  label">Pasta</div>
                <div class="col-md-4">
                    <div><input type="radio" name="pastatype" value="0" />Spaghetti (no extra cost)</div>
                    <div><input type="radio" name="pastatype" value="50" />Fettucine (add 50 cents)</div>
                    <div><input type="radio" name="pastatype" value="75" />Fusilli (add 75 cents)</div>
                </div>
                <div class="col-md-4 msg" id="radioLabel"></div>
            </div>

            <div class="row">
                <div class="col-md-4  label">Sauce</div>
                <div class="col-md-4">
                    <select name="sauce">
                        <option value="0">Pomodoro (no extra cost)</option>
                        <option value="50">Bolognese (add 50 cents)</option>
                        <option value="100">Alfredo (add $1.00)</option>
                    </select>
                </div>
                <div class="col-md-4"></div>
            </div>

            <div class="row">
                <div class="col-md-4  label">Extras</div>
                <div class="col-md-4">
                    <div><input type="checkbox" name="extras" value="200" />Side salad (add $2.00)</div>
                    <div><input type="checkbox" name="extras" value="100" />Bread sticks (add $1.00)</div>
                </div>
                <div class="col-md-4"></div>
            </div>

            <div class="row">
                <div class="col-md-4  label">Name</div>
                <div class="col-md-4"><input type="text" id="name" name="client_name" /></div>
                <div class="col-md-4 msg" id="nameLabel"></div>
            </div>

            <div class="row">
                <div class="col-md-4  label">Phone</div>
                <div class="col-md-4"><input type="text" id="phone" value="" /></div>
                <div class="col-md-4 msg" id="phoneLabel"></div>
            </div>

            <div class="row">
                <div class="col-md-4  label"><input type="submit" value="Order" /></div>
                <div class="col-md-4" id="totalcost"></div>
                <div class="col-md-4 msg" id="submitMessage"></div>
            </div>
        </div>

    </form>

</body>

<script>
    function calculateOrder() {
        var totalCost = 750;

        //Storing Pasta radio buttons into array.  Iterating through array and adding checked selection's value to the total cost. 
        var submitBool = true;
        var pastaArray = document.getElementsByName('pastatype');
        for (var i = 0; i < pastaArray.length; i++) {
            if (pastaArray[i].checked == true) {
                totalCost = totalCost + parseInt(pastaArray[i].value);
            }
            //Validating Pasta input
        }
        if (pastaArray[0].checked == false && pastaArray[1].checked == false && pastaArray[2].checked == false) {
            document.getElementById('radioLabel').innerHTML = "Required field! (You must choose a pasta)";
            submitBool = false;
        } else {
            document.getElementById('radioLabel').innerHTML = "";
        }

        //Storing sauce selection into an array.  Adding price for selected option.
        var sauceArray = document.getElementsByName('sauce');
        totalCost = totalCost + parseInt(sauceArray[0].value);

        //Storing extras selection(s) into an array.  Adding prices for selected options.   
        var extraArray = document.getElementsByName('extras');

        for (var x = 0; x < extraArray.length; x++) {
            if (extraArray[x].checked == true) {
                totalCost = totalCost + parseInt(extraArray[x].value);
            }
        }


        //Validating Name input
        if (document.getElementById('name').value == "") {
            document.getElementById('nameLabel').innerHTML = "Required field!  Enter your name.";
            submitBool = false;
        } else {
            document.getElementById('nameLabel').innerHTML = "";
        }

        //Validating Phone Number Input
        var phone = document.getElementById('phone').value;
        phone = phone.toString();

        if (document.getElementById('phone').value == null) {
            document.getElementById('phoneLabel').innerHTML = "Required field!  Enter your phone number.";
            submitBool = false;
        } else if (phone[3] != "-") {
            document.getElementById('phoneLabel').innerHTML = "Enter in 888-888-8888 format!";
            submitBool = false;
        } else if (phone[7] != "-") {
            document.getElementById('phoneLabel').innerHTML = "Enter in 888-888-8888 format!";
            submitBool = false;
        } else if (phone.length > 12 || phone.length < 12) {
            document.getElementById('phoneLabel').innerHTML = "Enter in 888-888-8888 format!";
            submitBool = false;
        } else {
            document.getElementById('phoneLabel').innerHTML = "";
        }


        //Form runs if input has been valid in all input options
        if (submitBool == false) {

            return false;
        } else if (submitBool == true){
            var preFixed = totalCost / 100;
            var postFixed = preFixed.toFixed(2);


            document.getElementById('totalcost').innerHTML = "Total Bill: $" + postFixed;

            document.getElementById('submitMessage').innerHTML = "Order is being processed, <a>cancel?</a>"

           setTimeout(function() {
               return true;
           }, 5000);
        }

    }

</script>

</html>
```

【问题讨论】：

我建议您研究“回调”，因为它们可能会为您当前的问题提供更好的方法。附带说明一下，不需要您的 else if 语句，因为代码在 return false; 行上停止执行
@Rylee 我会调查他们的！谢谢你的指点:)

标签： javascript html settimeout

【解决方案1】：

您可以使用onSubmit 事件并延迟通常的功能。我创建了一个简单的演示，因此您可以轻松理解它。在此处提交表单后，它将在 5 秒后提交表单，或者如果您点击取消，则会被取消。

const myForm = document.getElementById('myForm');
myForm.addEventListener('submit', handleSubmit);
var submitTimer;

function handleSubmit(event) {
console.log('submitTimer set');
  event.preventDefault();
  submitTimer = setTimeout(() => {
    this.submit();
    console.log('Submitted after 5 seconds');
  }, 5000)
};
function cancel(){
  clearTimeout(submitTimer);
  console.log('Submit Canceled');
}

<form id="myForm">
  <input type="text" name="name"/>
  <button type="submit">Submit</button>
<button type="button" onclick="cancel()" >Cancel</button>
</form>

【讨论】：

谢谢，这是有道理的。我可以合并这个，我只需要弄清楚如何在我的输入被验证为正确输入的情况下执行这个。
@stasis100t 使用此示例，如果您的输入无效，请调用cancel() 函数

【解决方案2】：

setTimeout 函数在指定的毫秒数（在您的情况下为 5000）后调用一个函数或计算一个表达式。您在代码中所做的只是返回一个布尔值，而不创建通道来在时间过去后获取值。由于这段代码有点“异步”（它需要时间），你可以使用内置的 Promise 函数来获取值。换句话说，您的代码可以重组为这样的：

getTheBoolValue = () => new Promise((resolve, reject) => {
  setTimeout(function(){
    resolve(true)
  },5000)
})

getTheBoolValue().then(data => console.log(data))

【讨论】：